jQuery Plugin To Mask/Unmask Password On Demand

A super simple jQuery plugin which allows you to reveal the password text on demand by clicking the toggle button in a password input.

See also:

• jQuery Plugin For Previewing Password Field Values - Prevue
• Simple jQuery Plugin To Show Hidden Password - preventPassTypo
• Show/Hide Password Field Text with jQuery and Bootstrap
• Toggle Password Visibility With jQuery - hideShowPassword
• jQuery Plugin For Windows 8 Password Reveal Feature - Sauron

How to use it:

1. Create a password input with a password text toggle button.

<input type="password" value="" placeholder="Enter Password" id="password" class="password">
<button class="unmask" type="button" title="Mask/Unmask password to check content">Unmask</button>

2. The sample CSS to style the input and the toggle button.

input {
  width: 250px;
  padding: 10px 12px;
  margin-bottom: 5px;
  border: 1px solid #cccccc;
  border-bottom-color: #fff;
  border-right-color: #fff;
  border-radius: 4px;
  background: #e3e3e3;
  color: #888;
}

.password + .unmask {
  position: absolute;
  right: 68px;
  top: 7px;
  text-indent: -9999px;
  width: 25px;
  height: 25px;
  background: #aaa;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  -webkit-appearance: none;
}

.password + .unmask:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 17px;
  height: 17px;
  background: #e3e3e3;
  z-index: 1;
  border-radius: 50%;
}

.password[type="text"] + .unmask:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 13px;
  height: 13px;
  background: #aaa;
  z-index: 2;
  border-radius: 50%;
}

3. Include the latest version of jQuery Javascript library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

4. The Javascript to enable the plugin. Add the following JS snippet in your web page or existing JS file, but after jQuery library.

$('.unmask').on('click', function(){

if($(this).prev('input').attr('type') == 'password')
changeType($(this).prev('input'), 'text');

else
changeType($(this).prev('input'), 'password');

return false;
});

function changeType(x, type) {
if(x.prop('type') == type)
return x; //That was easy.
try {
return x.prop('type', type); //Stupid IE security will not allow this
} catch(e) {
//Try re-creating the element (yep... this sucks)
//jQuery has no html() method for the element, so we have to put into a div first
var html = $("<div>").append(x.clone()).html();
var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
//If no match, we add the type attribute to the end; otherwise, we replace
var tmp = $(html.match(regex) == null ?
html.replace(">", ' type="' + type + '">') :
html.replace(regex, 'type="' + type + '"') );
//Copy data from old element
tmp.data('type', x.data('type') );
var events = x.data('events');
var cb = function(events) {
return function() {
//Bind all prior events
for(i in events)
{
var y = events[i];
for(j in y)
tmp.bind(i, y[j].handler);
}
}
}(events);
x.replaceWith(tmp);
setTimeout(cb, 10); //Wait a bit to call function
return tmp;
}
}

---

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