What’s New in hideShowPassword 2

Last June, we released our hideShowPassword plugin for improving the experience of password-entry (particularly on mobile devices). As of this writing, it’s our most-starred and most-forked project on GitHub.

We’ve released a handful of incremental and bug-fix updates since then, but today we’re shipping a full-fledged Version 2 with several noteworthy improvements.

The plugin’s “inner toggle” feature tended to steal the show, yet its syntax was verbose:

$(selector).hideShowPassword(true, { innerToggle: true });
Code language: JavaScript (javascript)

We now support a simpler, shorthand syntax for enabling the inner toggle:

$(selector).hideShowPassword(true, true);

// enable toggle but hide till input focus:
$(selector).hideShowPassword(true, 'focus');

// using shorthand method:
$(selector).showPassword('focus');
Code language: JavaScript (javascript)

My personal favorite feature is the improved accessibility of the inner toggle button. Some changes we made based on real-world feedback:

• The toggle button element is now a <button> by default (it was previously a <div>).
• Several accessibility attributes have been added to better communicate the purpose and state of the button to assistive devices.
• The toggle should now be keyboard-accessible, with space and enter key events attached where necessary.

We understand every project’s different, and you may need to tweak some of these new properties. Luckily, Version 2 also includes…

Just about anything we could make an option, we have. There are so many new options, we had to re-organize the options object to accommodate them all. See the full list here.

Version 1 of hideShowPassword supported Zepto, but we’ve decided to simplify the plugin’s dependencies by only supporting jQuery from here on out. This makes sense to us for a few reasons:

• Zepto’s data module was required, necessitating a custom build of Zepto to work at all.
• The plugin’s inner toggle features could be unpredictable given Zepto’s simpler width and height calculation methods.
• Zepto does not support AMD, and likely never will. We introduced AMD support to hideShowPassword in our first minor update based on developer feedback.
• While Zepto’s modest file size remains an attractive feature, its performance once loaded may not be so competitive.

All the aforementioned improvements (plus more fixes and tweaks) are available right now on GitHub (which is also a great place to report issues or request features). Check out the live demo if you remain unconvinced.

If you use the plugin in a project, please drop us a line and let us know. We’d love to hear about it!