Password Value as Text

November 17, 2009 at 1:53 am Leave a comment


I was working on a design the other day that only had text fields with no labels, the label was in the text field and would disappear when clicked on. Then I came to the password fields and was a little stumped as how to solve this, as any value in a password field is displayed as dots, not text.

I was thinking about using an overlay, but that got too complicated. I figured out a way to do this with JavaScript, basically write a function that on page load converts all password fields to text, but when they get focus they are cleared and the type is set back to type “password”. It worked like a charm.

The code I created is specific to the website I was working on, but I’m pasting it here anyway in case it might be some help to someone.

function doClear( o ) {
function setValue( o, myText ) {
if ( o.value == myText ) {
o.value = ”;
}
else if ( o.value == ” ) o.value = myText;
}
switch ( o.id ) {
case “username”: {
var myText = ‘Enter Username’;
break;
}
case “password”: {
var myText = ‘Enter Password’;
o.type = ‘password’;
break;
}
case “su_emailAddress”: {
var myText = ‘Your Email Address’;
break;
}
case “su_username”: {
var myText = ‘Choose a Username’;
break;
}
case “newsletterEmail”: {
var myText = ‘Enter Email Address’;
break;
}
case “su_password”: {
var myText = ‘Choose Password’;
o.type = ‘password’;
break;
}
case “su_passwordConfirm”: {
var myText = ‘Confirm Password’;
o.type = ‘password’;
break;
}
}
setValue( o, myText );
}

function displayPasswordValue( id ) {
var passwordElement = document.getElementById( id );
passwordElement.type = “text”;
}
function passwordInit() {
displayPasswordValue( ‘password’ );
displayPasswordValue( ‘su_password’ );
displayPasswordValue( ‘su_passwordConfirm’ );
}
YAHOO.util.Event.onDOMReady( passwordInit );

Advertisements

Entry filed under: JavaScript. Tags: , , .

Business Directory Australia Brisbane Copywriter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 19 other followers

Archives

Top Rated

Top Clicks

  • None

Blog Stats

  • 169,146 hits

%d bloggers like this: