How can you change the text input field to the password area using focus in jQuery?

Question

I would like to display the "password" as the text in the password area, and with the field focused, it should be empty and allow the user to enter the usual password (marked with an asterisk).

I am currently using the following method. First, I show the password text field, when it is focused, it is deleted and replaced by the password field. Here is jQuery:

$(document).ready(function() { $("#password").focus( function() { $("#pwd").html('<input type="password" id="password" name="password" value="" />'); $("#password").focus(); }); }); 

This works in Firefox and Chrome, but it does not work in IE 8 (and, presumably, in other IEs), because for some reason the focus call fails (maybe the DOM is not ready?).

Demo is available on jsbin .

Any ideas?

Answer 1

You can try the watermarker plugin. I do not know if it works in IE8.

Answer 2

Realizing that my original solution would not work, I spent some time trying to find a working solution only out of curiosity. I would still recommend using the jQuery eKek0 plugin , as it gets worse.

The following example is quite flexible. Instead of hard-coding the replacement <input /> tags as strings, replacement tags are made from the original tags. This helps if the attributes of the <input /> changed since you will not lose any style or other attributes assigned to the tags.

The following solution was tested on Chrome, Firefox, IE8, and IE8 in IE7 compatibility mode.

 $(document).ready(function() { var focusEvent = function() { if(this.type == 'text') { var html = $(this).clone().wrap('<span></span>').parent().html(); html = html.replace(/type=("|')?text("|')?/, 'type="password"'); var $newPwdBx = $(html); $(this).replaceWith($newPwdBx); $newPwdBx.removeClass('readOnly'); $newPwdBx.val(''); $newPwdBx.focus(); $newPwdBx.blur(blurEvent); } }; var blurEvent = function() { if(this.value == '') { var html = $(this).clone().wrap('<span></span>').parent().html(); html = html.replace(/type=("|')?password("|')?/, 'type="text"'); var $newTxtBx = $(html); $(this).replaceWith($newTxtBx); $newTxtBx.addClass('readOnly'); $newTxtBx.val('password'); $newTxtBx.focus(focusEvent); } }; $("#password").focus(focusEvent); }); 

This code replaces <input /> with the appropriate type of blur and focus. It also adds / removes a class to stylize the placeholder text “password”, therefore it is more useful because the text “password” of the placeholder is not the default black color, which could potentially be misleading for the user.

You can see how it works here: http://jsbin.com/azugu

Answer 3

I did something like this. If you are using javascript, this is one way to do this:

• You have two input fields: regular and password.
• Password is hidden css
• When normal input gets focus
  • Hide normal input
  • Show password entry
  • Give focus to password entry

This approach has some problems to consider. If someone has disabled javascript or is using the NoScript extension for Firefox, they may not be able to submit the form. If someone starts typing before javascript is loaded, unexpected results are possible.

Another approach is to use css and have javascript as a backup (for IE6). Create an image with the text "Password". Make this image the background for the password field. You can use pseudo-classes in css to change the background of the password field for hovering and. Thus, if a person has javascript disabled, the form still works. It also works as soon as css loads.

CSS might look something like this:

 .pass { background-image: url(/path/to/img.png); } .pass:hover { background: white; } 

Using jquery javascript might look something like this:

  $( ".pass" ).hover( function() { $( this ).css( "background", "white" ); }; 

Answer 4

The most common way to achieve this is to set the background image in the password field with the text "password" and delete the background image when it becomes the focus.

Answer 5

Why not just change the attribute and erase the value?

 $("#password").focus( function() { $(this).attr('type','password'); $(this).attr('value',''); }); 

Answer 6

Try experimentally if you:

 $(document).ready(function() { $(".pass").focus(function() { $pwInput = $('<input type="password" class="pass" name="password" value="" />'); $(this).remove(); $("#someDiv").append($pwInput); }).focus(); }); 

Answer 7

Why don't you just put the div on top of the top?

 var $pwd = $("#passwordBox"), pos = $pwd.position() ; $pwd .after( // add the div $('<div></div>') .html("Password") .css({ position : "absolute", // place it over this top : pos.top + "px", // adjust as necessary left : pos.top + "px" }) ) .next() // select the new div .andSelf() .one('click focus', function() { $pwd.next().remove() // remove the div .end().focus() // focus the input box ; }) ; 

Answer 8

This works in FF and IE:

 $(document).ready(function() { $("#password").focus( function() { $(this) .after('<input type="password" id="password" name="password" value="" />') .remove(); $("#password").focus(); }); }); 

Answer 9

There is also this txReplaceFormPassword created by Simone Lippolis.