When typing a password, on desktop devices,the dots that are covering typed characters are useful, because we can assume that somebody might walk behind our desk and look at the password we are typing.


On mobile devices, it’s harder to look - we hold the device in hand - and it’s easier to make a mistake.

When the password is a key step in your business (to buy something, for example), you don’t want users to go away because they are tired of rewriting a miswritten password.

It would be nice to have a toggle button that can show the password, to avoid typos and in the same time guarantee privacy when needed.

The html is simple: a form and an anchor to toggle the status:

<input type="password" class="toggablePwd" />

And the javascript: we need to notice that for security reasons you can’t change the type attribute of a password input field. So the idea is to copy the html of the tag (thus preserving classes and other attributes) and repopulate the value field.

$("button").on("click", function() {
var elemtn = $(".toggablePwd")[0].outerHTML;

if ($(this).html() === "show") {
elemtn = elemtn .replace(/password/, "text");
} else {
elemtn = elemtn.replace(/text/, "password");

var val = $(".toggablePwd&").val();

You can see a demo here