[jQuery] Hide / show password field with focus
Hi,
I've put together a couple of small functions to handle the removal /
restore of the default text inside some text inputs. One of these
inputs is a password field. I'm showing the user a standard text
field containing the text 'Password'. When the user clicks in the box
the standard text field is hidden and a proper password box is show.
The following works fine:
$('.login_input').click(function() {
if(this.value == this.defaultValue) {
this.value = '';
}
if(this.name == 'fake_pass') {
$('.header_login_right_fake').hide();
$('.header_login_right_real').show();
}
});
$('.login_input').blur(function() {
if(this.value == '') {
this.value = this.defaultValue;
if(this.name == 'pass') {
$('.header_login_right_real').hide();
$('.header_login_right_fake').show();
$('html').focus();
}
}
});
However, the newly displayed password box is not in focus and the user
has to click again to start typing their password. So, in an attempt
to correct this problem I added '$('.login_input').focus();'. This
works and focus is added to the password input but it now breaks the
recall of the default text. Now when a user clicks away from the box
and calls the onblur() function the default text is not displayed.
Here is all my code plus the HMTL:
----------
$('.login_input').click(function() {
if(this.value == this.defaultValue) {
this.value = '';
}
if(this.name == 'fake_pass') {
$('.header_login_right_fake').hide();
$('.header_login_right_real').show();
$('.login_input').focus();
}
});
$('.login_input').blur(function() {
if(this.value == '') {
this.value = this.defaultValue;
if(this.name == 'pass') {
$('.header_login_right_real').hide();
$('.header_login_right_fake').show();
$('html').focus();
}
}
});
----------
<div class="header_login_left">
<input class="login_input" type="text" name="email" value="<?php
echo TEXT_USER_NAME; ?>" />
</div>
<div class="header_login_right_fake">
<input class="login_input" type="text" name="fake_pass" value="<?php
echo TEXT_PASSWORD; ?>" />
</div>
<div class="header_login_right_real">
<input class="login_input" type="password" name="pass" value="" />
</div>
----------
Can anybody see where I'm going wrong or how I could improve these
functions generally? I'm very new to jQuery so please feel free to
talk down to me! Thanks in advance for any help.
Rob.