Show/hide password input field

1.md

Show/hide password input field

JS

This is allows you to see/hide the password input fields, making it a lot easier to input a create value.

2.js

$(document).ready(function(){
	if($('input[type=password]').length > 0){
		$('input[type=password]').each(function(){
			var a = document.createElement('a');
			var t = document.createTextNode("Show");
			a.appendChild(t);
			a.setAttribute('data-show', 'false');
			a.setAttribute('title', 'Toggle display for password input');
			a.classList.add('toggle-pwd');
			a.href = "#";
			$(this).wrap("<div class=\"wrapper-pwd\"></div>");
			$(this).after(a);
		});
	}
});

$('body').on('click', '.toggle-pwd', function(e){
	e.preventDefault();
	var displayPwd = $(this).attr('data-show');
	if(displayPwd == 'false'){
		$(this).attr('data-show', 'true').text('Hide');
		$(this).siblings('input').attr('type', 'text');
	}else{
		$(this).attr('data-show', 'false').text('Show');
		$(this).siblings('input').attr('type', 'password');
	}
});

3.less

.wrapper-pwd{
	position: relative;
	.toggle-pwd{
		position: absolute;
		top: 15px;
		right: 10px;
		letter-spacing: 2px;
		font-size: 14px;
		text-transform: uppercase;
		text-decoration: none;
		color: #808080;
	}	
}