Comments on: Default Text Field Values That Disappear on Focus

By: Tutorial_Review

Tutorial_Review — Sun, 28 Feb 2010 18:55:51 +0000

Been looking up how to do this for a while now, thanks for the article! A Great help!

By: hefox

hefox — Thu, 15 Oct 2009 16:05:55 +0000

Beware of Pre-assinging values for login boxes; overrides browsers remembered username/passwords.

I countered this via not pre-assinging the value and doing this check $("input#edit-name.default-value[value]",context).removeClass("default-value"); $("input#edit-pass.default-value[value]",context).removeClass("default-value");

if it fails, ie browser hasn't given anything, then I want I add in the text $("input#edit-name.default-value",context).val('login'); $("input#edit-pass.default-value",context).val('password');

Passwords boxes will appear as ***** whatever the value is since they are password boxes.

By: WEB DUDE

WEB DUDE — Tue, 12 May 2009 22:06:26 +0000

CD, ANDY, RYAN, DAZ, Thanks for the useful info here!!!

By: Daz

Daz — Sun, 22 Mar 2009 20:59:11 +0000

Hi Dan,

You need to have a value=”The text you want to appear” attribute to the input element. I think that’s what you’re asking.

Hi Kav,

Any chance of some more info on that one? What browser/version? What operating system? And a slightly more in depth explaination of the bug might help me to figure out how to solve your troubles.

Thanks,

Daz

By: kav

kav — Sun, 22 Mar 2009 11:24:42 +0000

After refresh/reload page the blur and color just wiped out.

By: Dan

Dan — Mon, 16 Mar 2009 14:15:40 +0000

what do we input on the form side of thing

class="default-value" id="1"

is not working for me.

Regards

Dan

By: Dominic Claxton

Dominic Claxton — Fri, 24 Oct 2008 14:23:53 +0000

I changed it slightly to work even better (in my opinion!) Remove the focus entirely from the links and instead trigger from the javascript. This should allow you to make the default text disappear on focus but when the user types in and then refocuses on it again it doesn’t disapperar but merely highlights. This gives the user the option of continuing to type by clicking again. For me it works better. Try it!

Tested in FireFox 2 and IE7 Here it is in full.

var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
 
<p>$(document).ready(function() {p>
 
<pre><code>$("input.default-value").css("color", inactive_color);
var default_values = new Array();                      
 
$('input[type="text"]').focus(function() {
    if (this.value == this.defaultValue){
    this.value = '';
        this.style.color = active_color;
}
if(this.value != this.defaultValue){
    this.select(); 
    this.style.color = active_color;
}
});
$('input[type="text"]').blur(function() {
    if (this.value == ''){
    this.value = (this.defaultValue ? this.defaultValue : '');
    this.style.color = inactive_color;
}
});
code>

}

By: Tahir

Tahir — Thu, 23 Oct 2008 06:43:15 +0000

Great example Andy; I’ve borrowed it for my site with one change. Once a user entered their information into the text-field I didn’t want the script to remove the users content when clicked again. So here is the change:

$(document).ready(function(){
    $('input[type="text"]').focus(function() {
        if (this.value == this.defaultValue) this.value = '';
    });
    $('input[type="text"]').blur(function() {
        if (this.value == '') this.value = (this.defaultValue ? this.defaultValue : '');
    });
});

Thanks again for the example. It was a huge helper for a jQuery Newbie who had no idea where to start!

By: Vignesh Sugumar

Vignesh Sugumar — Tue, 21 Oct 2008 17:50:37 +0000

Here is another working solution!

Asp Textbox

For simple html

By: Ryan

Ryan — Tue, 26 Aug 2008 00:29:55 +0000

$(document).ready(function(){
    $('input[type="text"]').focus(function() {
        if (this.value == this.defaultValue) this.value = '';
    });
    $('input[type="text"]').blur(function() {
        if (this.value == '') this.value = (this.defaultValue ? this.defaultValue : '');
    });
});

Thanks again for the example. It was a huge helper for a jQuery Newbie who had no idea where to start!