Many number of website has a instant show or hide option to reduce number of input fields at signup page. For example, you have a signup page with four input fields which is username, email, password and confirm password. By using this Jquery plugin reduces four input fields to three input fields? which means no need to add confirm password field option because users can able to see entered password via this (show and hide password) option.
Note: The plugin will not assume that touch is supported unless you tell it by specifying a value for the touchSupport option
- Compatible with touch devices (By using Modernizr)
- Very light weight
How to use this:
Just its library and css to your HTML header section then initialize this plugin for selector.I mean
I have added Modernizr for touch support in this tutorial.
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<input type="password" class="form-control" id="password-1" placeholder="Password">
<span class="help-block">Click eye icon to show and hide the password</span>
* This toggle style shows a winking "eye-con" (nyuk, nyuk).
* Open eye means "show," closed eye means "hide."
background-position: 0 center;
background-position: -44px center;
* Because our input elements have a z-index so that
* their borders will overlap on focus, we'll give ours
* a higher one to make sure they're always visible.
IE10 (Windows 8) issue:
Internet Explorer 10 includes its own control for toggling password visibility that can compete with this plugin when enabled.You can disable this control by
* Add this if you want to disable IE10's implementation
* of the winking eye in favor of your own.
* Alternatively, you could set the 'innerToggle' option to
* false for that browser only.
I hope this tutorial is useful for modern web development.If you like this tutorial don’t forget to subscribe for my update via email.
Demo and Download