[jQuery] Re: Hide / show password field with focus
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.
[jQuery] Re: Hide / show password field with focus
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.
[jQuery] Re: Hide / show password field with focus
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.
