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.