Show and hide input password field

Show and hide input password field

Rather than using multiple inputs, javascript could be employed...

Most developers in their career will come across the conundrum when a customer asks if there could be a way they could view the password text that they have inputted in an obfuscated field. Although this may seem like a security issue – making the password visible to any lurking persons – there are legitimate cases when it could be helpful. For example, being able to take a quick peek at a password because you think you may have made a typo is easier then starting again. Even windows and mac implement the option to view password when entering a new wireless network:

149-mac-wireless-showpassword

If you search on Google you will find many different ways of showing and hiding an input password. A recurring solution is to have two input fields one obfuscated and the other readable. Javascript is then used to keep the fields values in sync and a toggle is employed to display one or the other. This is a solution that works but in my opinion is a little over the top.I would like to present an alternate solution. Rather than using multiple inputs, javascript could be employed to monitor the password field’s value and set it to an element such as a hyperlink which when hovered over will display the password. I implemented this with great effect on a new software project we are working on, the customer has a nice eye icon which when hovered over displays a pretty tooltip which are pretty common in most javascript libraries.The benfits of this solution are you do not need multiple input fields and the pop-over is more discrete making it unlikely a lurker will even know you are viewing the password.

You can see a simple demo here: http://www.afxdesign.com/demos/show-hide-password/ Simply type a password in the field. To view the password hover over the obvious link.

The code

<script>
        window.addEvent('domready',function() {
        	var pass = $( $("passwordPerve").getProperty("data-target") );
        	pass.addEvent('keyup', function() {
            	    $("passwordPerve").set('title',this.value);
        	});
        });        
</script>

<label>Password</label>
<input type='password' name='password' id="password" />
<a href="#" title="Type password in box" id="passwordPerve" data-target="password">Hover to show the password</a>

Note: The code above uses the mootools library for convenience (and because it’s awesome!)

Javascript is used to hook into the element identified by the id “passwordPerve”. The data-target attribute is used to identify which input field it would like to perve on, in this case “password”. The identified input field has a “keyup” event added to it which sets the “passwordPerve” hyperlinks title attribute to the input fields value.

As you should see it is very simple and works like a charm! Enjoy.

Please recommend us if you found this article helpful:
Anthony Luxton
Author
Anthony Luxton
Director

Published:
2nd August, 2012

Infographics

5 reasons why you need a website
Android usage – Medina Valley Centre
Website success benchmark
View all

Interviews

Interview with Mr Tom Fallick
Interview with Samuel Claxon
Interview with Anthony Luxton
View all

iPad Web Design

Responsive web design example
iPad Javascript hover
Introduction to iPad development
View all

Marketing

Why you should run an e-mail campaign
View all

Print

The intricacies of preparing for print
View all

Search Engine Optimisation

Getting started in guest blogging
Website recommendations for 2013
The importance of site structure for SEO
View all

Web Development Tips & Tricks

Youtube iframe API player undefined Firefox
Show and hide input password field
Pixel-perfect webpages with just CSS
View all

You and Your Website

LinkedIn For Business
How much content is enough?
How often should I update my blog?
View all