16
May/0812

Default Text Field Values That Disappear on Focus

You will have noticed this effect out on your travels on the internet - a text input field has some default text in it (often in a slightly dimmed colour), and when you click on the text box, default text disappears and then reappears when you click away from the box. It happens on the search box to the right here too.

I needed this same effect at work today so a quick Google came up with this great blog post - a lovely example of the exact effect I was looking for in both raw javascript and a version using the jQuery library.

The script searches the page that it’s inserted on for all form input fields that have a class of ‘default-value’ applied. Each form input field must also have a unique ID.

When the page loads the script changes the color of the text in the text fields it has found to the value of ‘inactive_color’. If the user clicks on the input field, the default text is blanked, and the colour changed to ‘active_color’. If the user clicks away from the input field, i.e. the input field loses focus, the value of the text field will revert back to the original text, and the colour will change back to ‘inactive_color’, unless the user has entered some other text.

Here’s a copy of the jQuery version for my own personal notes, never know when that could be useful:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/*
 * Written by Rob Schmitt, The Web Developer's Blog
 * http://webdeveloper.beforeseven.com/
 */
 
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.default-value").focus(function() {
    if (!default_values[this.id]) {
      default_values[this.id] = this.value;
    }
    if (this.value == default_values[this.id]) {
      this.value = '';
      this.style.color = active_color;
    }
    $(this).blur(function() {
      if (this.value == '') {
        this.style.color = inactive_color;
        this.value = default_values[this.id];
      }
    });
  });
});

However, we don’t use jQuery at work, our entire site is based around Prototype and script.aculo.us, so I did a bit of butchering and here’s the code adapted to use Prototype:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/*
 * Written by Darren Oakley
 * http://hocuspokus.net
 */
 
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
 
Event.observe( window, 'load', function () {
    var default_values = new Array();
    $$("input.default-value").each( function (s) {
        $(s).setStyle({ color: inactive_color });
        $(s).observe( 'focus', function () {
            if (!default_values[s.id]) {
                default_values[s.id] = s.value;
            }
            if (s.value == default_values[s.id]) {
                s.value = '';
                $(s).setStyle({ color: active_color });
            }
            $(s).observe( 'blur', function () {
                if (s.value == '') {
                    $(s).setStyle({ color: inactive_color });
                    s.value = default_values[s.id];
                }
            });
        });
    });
});

Now all you need to do is give your input text fields a unique id, and the class of ‘default-value’, then the script will take care of the rest.

Spread the Word
  • Twitter
  • del.icio.us
  • Digg
  • Facebook
  • Google Bookmarks
  • Reddit
  • NewsVine
  • Slashdot
  • connotea
  • HackerNews
  • Print this article!
  • E-mail this story to a friend!
Tagged as: , ,
12 Comments
Comments (12) Trackbacks (0)
  1. cd
    7:49 pm on June 16th, 2008

    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" />
  2. Andy
    7:03 am on July 24th, 2008

    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 : '');
});
  3. Andy
    10:00 am on July 24th, 2008

    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 : '');
});
  4. Daz
    11:09 am on July 24th, 2008
    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. :)

  5. Ryan
    5:29 pm on August 25th, 2008

    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!

  6. Vignesh Sugumar
    10:50 am on October 21st, 2008

    Here is another working solution!

    Asp Textbox

    For simple html

  7. Tahir
    11:43 pm on October 22nd, 2008

    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!

  8. Dominic Claxton
    7:23 am on October 24th, 2008

    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;
    }
    });
}
  9. Dan
    2:15 pm on March 16th, 2009

    what do we input on the form side of thing

    class=”default-value” id=”1”

    is not working for me.

    Regards

    Dan

  10. kav
    11:24 am on March 22nd, 2009

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

  11. Daz
    8:59 pm on March 22nd, 2009

    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

  12. WEB DUDE
    10:06 pm on May 12th, 2009

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

Leave a comment

No trackbacks yet.

Recent Posts

Recent Comments

Categories