I’m the middle of building a new company website, something that will bring them into the 21st century. With that thought in mind, I  need to develop a back end for employees to log in and update their own information. This is of course centered around their log in credentials.

So in the their “dashboard” they can update their password. But if they are like me, sometimes they type faster then they realize and might have hit different keys by mistake, so I thought I would give them the ability to show their password in readable characters if they wanted to. This allows them to check over what they have typed and verify they have what they want. I think it’s easier then using a double password field that just takes more time to fill in – but that’s just me.

So let’s start by showing the image after the input field.

The image I’m using is out of an icon pack I found online, it uses the two lock images, one locked and one unlocked. The first one is the unlocked image.

Now let’s move onto our JQuery function to make all the magic – this is called by the onclick above “show_password()” and yes you could bind a click action to it, but I just never got around to doing it.

function show_password() {
	if ($("#pw").attr("type") == "password") {
		$("#pw").replaceWith("
");
		$("#lock_image").html("");
	} else {
		$("#pw").replaceWith("
");
		$("#lock_image").html("");
	}
}

So let me break it down for you…in simple terms, because that’s how I roll (I love simple things)…

It really is nothing more than a toggle, if it’s “on” then do this, if it’s “off” then do this so with that in mind, when you click the image JQuery looks to see what the attribute (attr) of the input field is, if it is “password” then we replace (replaceWith) the input field with a new one that has the attribute of “text”. You might ask yourself why replace the whole thing, well from some things I found on the internet, and the console message from FireBug say that it’s not possible to change the type attribute of an input field. So this works around that.

So now you have your password field showing text, and you want to hide it again. Just click the image and it follows the else piece, replacing it with the second part which will set it back to a password field and mask the letters.

Very simple, and very easy.