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.
