Form password show characters
It is becoming more common for users to want to know what password they are typing and this can be easily done with jquery.
<form method="post">
<div class="email_address">
<label for="email_address">email address:</label>
<input name="email_address" id="email_address" value="" type="text" />
</div>
<div class="password">
<label for="password">password:</label>
<input name="password" id="password" value="" type="password" />
</div>
<div class="submit">
<input type="submit" value="login" />
</div>
</form>
The jquery code is as follows:
/*** password masking and unmasking ***/
$('input[type="password"]').each(function() {
var id = $(this).attr('id');
var name = $(this).attr('name');
$(this).after('<div class="show-characters"><input id="show-characters-' + name + '" type="checkbox" /><label for="show-characters-' + name + '">Show characters</label></div>');
$('#show-characters-' + name).click(function() {
if ($(this).attr('checked')) {
$('#' + id).replaceWith('<input id="' + id + '" name="' + name + '" type="text" value="' + $('#' + id).val() + '" />');
} else {
$('#' + id).replaceWith('<input id="' + id + '" name="' + name + '" type="password" value="' + $('#' + id).val() + '" />');
}
});
});
/*** end ***/
Feel free to use the above jquery masking/unmasking code to show characters in a password text form field
