«
»
 

Changing Input Type from Text to Password in Internet Explorer Hack

by Michael Zhang on January 12, 2009

signinformLet’s say you have a login form with the standard username and password input fields, but instead of labels, you want to have grayed out text inside the fields to act as labels. Since the label’s aren’t actual input, they shouldn’t be submitted as actual data if a user submits the form without entering anything, and they should disappear if the user clicks the field to enter text.

The problem is, password fields should always be type=”password”, so the text they enter isn’t displayed while they type it. One solution would be to have javascript detect when the field is selected, and to dynamically change the type attribute of the field to “password” from “text”.

However, Internet Explorer has a problem with this, and refuses to play along. Thus, we must resort to a hack. Basically, what we’ll do is have two inputs, one of which is a fake text input, and the other a real password input. Here’s one way to implement this:

<input type="text" id="mockpass" class="mock" value="Password" onFocus="document.getElementById('mockpass').style.display='none'; document.getElementById('realpass').style.display=''; document.getElementById('realpass').focus();">
<input type="password" name="password" id="realpass" class="real" style="display: none;" onBlur="if(this.value=='') {document.getElementById('mockpass').style.display=''; document.getElementById('realpass').style.display='none';}">

The real input is initially hidden due to the style=”display: none”. If the user clicks the fake input, the onFocus event handler is triggered, and the inputs are swapped. To make the transition even more seamless, we set focus onto the real input using javascript as well: document.getElementById(‘realpass’).focus();

Notice that the second input is the one that has the actual name value, which is password in this case. This means that if the form is submitted without the user entering a value, the “password” value in the first field will not be submitted as the password, since there is no name attribute on that fake input.

If the user clicks away from the real password input without entering text, we want to replace the label. To do this, we simply use the onBlur event handler to check to see if the input is blank, and to swap again if it is.

This is just the bare basics, but to make it look nice and smoothly, you would need to set both inputs to have the same dimensions and attributes so that when they are swapped for one another, there is no change in the appearance of the input itself.

Using CSS, you can change the input with class mock to be grayed out, while having the other input be solid text.

From my experiences so far, this hack is pretty flawless. The only obvious problem is that it will not work for people who do not have javascript enabled (a dying breed?). The workaround would be to write this out to the page using javascript, while providing an old-school version of the input for non-javascripters using <noscript>

Here it is in action:

Tags: , , , , , ,

Viewing 20 Comments

 

Trackbacks

(Trackback URL)

close Reblog this comment
Powered by Disqus · Learn more
blog comments powered by Disqus