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