A safe way to toggle passwords
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.
- Many users have password helpers, such as LastPass, which may adapt the display of password fields.
- Changing the field
<input type="password" ...>
totext
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...). - 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