I would strongly disagree to show the password as the user typing it.
You could instead implement a way to show the status of the field with a user action like a user click to show password or on hover.
The reason is that the user makes the decision to show the password. Also, improve the security as maybe the users are not alone when they typing it
Some examples are:
Code from herdiansc
//Place this plugin snippet into another file in your applicationb
(function ($) {
$.toggleShowPassword = function (options) {
var settings = $.extend({
field: "#password",
control: "#toggle_show_password",
}, options);
var control = $(settings.control);
var field = $(settings.field)
control.bind('click', function () {
if (control.is(':checked')) {
field.attr('type', 'text');
} else {
field.attr('type', 'password');
}
})
};
}(jQuery));
//Here how to call above plugin from everywhere in your application document body
$.toggleShowPassword({
field: '#test1',
control: '#test2'
});
And
user Baraka Mahili
$('#show_password').hover(function functionName() {
//Change the attribute to text
$('#password').attr('type', 'text');
$('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
}, function () {
//Change the attribute back to password
$('#password').attr('type', 'password');
$('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
}
);