Comments on: Default Text Field Values That Disappear on Focus

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
 
$(document).ready(function() {
 
    $("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;
	}
    });
}

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!

By: Daz

Daz — Thu, 24 Jul 2008 18:09:23 +0000

This could be made simpler by assigning a custom property to the object in the DOM. I’ve called it “defaultValue”. Does not address the colour change, but again, it could be assigned as a custom property if necessary.

Ta! That’s just a little more concise, great example.

By: Andy

Andy — Thu, 24 Jul 2008 17:00:23 +0000

Even better, defaultValue is already part of the DOM. I always forget that… So here is a more slimline jQuery powered version

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

By: Andy

Andy — Thu, 24 Jul 2008 14:03:01 +0000

This could be made simpler by assigning a custom property to the object in the DOM. I’ve called it “defaultValue”. Does not address the colour change, but again, it could be assigned as a custom property if necessary.

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

By: cd

cd — Tue, 17 Jun 2008 02:49:11 +0000

if u want simple input text who will disapear when u focus ypur cursor on it just use this

<input onfocus="this.value=''" type="text" value="some text" />

or this

<input onfocus="this.select()" type="text" value="some text" />