It's good UX to allow the user to toggle the display of password fields as plain text - especially for mobile devices. Following progressive enhancement we can do this simply in JavaScript, however there are a few things to consider that may not be immediately obvious.

  1. Many users have password helpers, such as LastPass, which may adapt the display of password fields.
  2. Changing the field <input type="password" ...> to text in JavaScript is simple enough, but it may confuse password managers (even those built into a browser) and annoy users (because their password manager is now broken...).
  3. There's a possibility that the browser could cache or save the state of the field in plain text, which would be a Bad Thing.

Taking point 2, we can be a little smarter about how we handle form submits and ensure we only ever submit password fields, regardless of a toggled display state. This prevents point 3.

By placing the toggle outside of field, we can avoid most visual clashes with addons or password managers, covering point 1.

Example:

  • Updated 2016/3/15 for clarity

9,529 5 48