How do you implement Javascript onfocus() and onblur() for a password field?

Question

According to my title how to implement the onfocus and onblur to the password field? Default value is password (readable) and when we click the password field it will return to password format.

Here an example, I don't want to see "●●●●●●●●" but "Password" instead

<input type="password" name="password" value="password" onfocus="this.value=(this.value=='password') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'password' : this.value;" />

Update

Google result I found Change Input Type Dynamically but the code is too long. Maybe jquery can make it shorter.

Answer 1

change the type attr. dynamically:

<input type="text" name="email" value="[email protected]" onfocus="this.value=(this.value=='[email protected]') ? '' : this.value;this.type='password';" onblur="this.value=(this.value=='') ? '[email protected]' : this.value;this.type='text';" />

(I suggest you do this with a script instead of inline).

Answer 2

You will have trouble in Internet Explorer if you try and use 1 field because IE will not let you change the type of field.

You'll need to use 2 fields, and when the text input is focused, hide it, show the password input, and focus it.

You'd need something like this (using jQuery):

<input type="text" id="fakeemail" value="[email protected]"/>
<input type="password" id="realemail" value="" name="email" style="display:none;"/>

$('#fakeemail').focus(function(){
  $(this).hide();
  $('#realemail').show().focus();
});
$('#realemail').blur(function(){
  if(this.value == ''){
    $(this).hide();
    $('#fakeemail').show();
  }
});  

Answer 3

You can try using some jQuery and moving field labels around with CSS positioning. Check this guy's implementation out: http://graphicpush.com/more-accessible-input-pre-filled-text-with-jquery

The site that he links to also has a nice fade effect on the input fields on focus (but his implementation is a bit nicer than the one he links to).