jQuery Plugin To Show Hidden Password In Password Field - inputShowPwd

File Size: 8.19 KB
Views Total: 2488
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Show Hidden Password In Password Field - inputShowPwd

inputShowPwd is a cross-browser jQuery plugin used to generate a password toggle icon inside your password field that allows to reveal the hidden password in any web browsers.

See also:

How to use it:

1. Add jQuery library and the jQuery inputShowPwd plugin's script to the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/inputShowPwd.js"></script>

2. Wrap your password input field in a DIV container called 'inputShowPwd'.

<div class="inputShowPwd">
  <input type="password" placeholder="Password">
  <span class="showEle"></span>
</div>

3. Initialize the plugin and done.

new inputShowPwd('inputShowPwd');

4. Hide the native input clear / password toggle icons in the IE browsers.

::-ms-clear, ::-ms-reveal{display: none;}

5. Style and position the password toggle icon in the CSS:

.inputShowPwd > .showEle {
  display: none;
  position: absolute;
  height: 24px;
  width: 24px;
  top: 50%;
  margin-top: -12px;
  right: 6px;
  background:url(image/pwd.png) 50% 50% no-repeat;
  background-size: 24px 24px;
  z-index: 1;
  cursor: pointer;
}

This awesome jQuery plugin is developed by xuyongsky123. For more Advanced Usages, please check the demo page or visit the official website.