Thank you Daniel. That's perfect. This was hole in my understanding:
$('.header_login_right_fake > .login_input')[0].value = $
('.header_login_right_fake > .login_input')[0].defaultValue;
How to access the attributes of the inputs! My function now looks
like this:
// restore default text in login inputs
$('.login_input').blur(function() {
if(this.value == '') {
this.value = this.defaultValue;
if(this.name == 'pass') {
$('.header_login_right_fake > .login_input')[0].value = $
('.header_login_right_fake > .login_input')[0].defaultValue;
$('.header_login_right_real').hide();
$('.header_login_right_fake').show();
}
}
});
It seems to work perfectly (although I haven't tested it in Safari
yet). Many thanks for all your help :)
Rob.
On Jan 6, 7:37 pm, Daniel <dqmin...@gmail.com> wrote:
> 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.
