When you click outside the password field, the field is still <input class="login_input" type="password" name="pass" value="" /> not <input class="login_input" type="text" name="fake_pass" value="<?php echo TEXT_PASSWORD; ?>" />
Therefore, default value is '' , not <?php echo TEXT_PASSWORD; ?> a quick fix to your code ( not tested ) $('.login_input').blur(function(){ if(this.value === '' && this.name === 'pass'){ $('.header_login_right_fake > .login_input')[0].value = $ ('.header_login_right_fake > .login_input')[0].defaultValue } else{ if (this.value === ''){ this.value = this.defaultValue } } if(this.name === 'pass'){ $('.header_login_right_real').hide(); $('.header_login_right_fake').show(); $('html').focus(); } }); On Jan 6, 11:51 pm, rob303 <r...@cube33.com> wrote: > Hi, > > I'm still really struggling with this. Any help would be greatly > appreciated! > > Rob. > > On Jan 6, 11:40 am, rob303 <r...@cube33.com> wrote: > > > 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.