Show 'ghosted' example text in a field, and then clear it onblur

Question

I'm trying to duplicate the effect used in the Firefox search box where, if the search field does not have focus ( the user has not clicked inside of it ), it just says Google in gray text. Then, when the user clicks in the box, the text is removed and they can fill in their search term.

I want to use this to provide example field data for a web form.

JQuery syntax would be preferable to plain javascript, but plain JS would be fine too.

Thanks SO Hive Mind!

Answer 1

<style type='text/css'>
      input #ghost { color: #CCC; }
      input #normal { color: #OOO; }
</style>

<script type='text/javascript'> 
    function addTextHint(elem, hintText)
    {       
        if (elem.value == '')   
        {       
            elem.value = hintText;
            elem.style.className = 'ghost';
        }

        elem.onfocus = function ()
        {           
            if (elem.value == hintText)         
            {
                elem.value = '';
                elem.className = 'normal';
            }
        }

        elem.onblur = function ()
        {
            if (elem.value == '')
            {
                elem.value = hintText;
                elem.className = 'ghost';
            }
        }           
    }

    addTextHint(document.getElementById('foobar'),'Google');
</script>

Just whipped this up for you. jQuery would make it smaller I'm sure, but I don't use it.

Answer 2

This technique is so commonly used that it's now explicitly supported in the HTML spec through the placeholder attribute of the input tag:
HTML placeholder Attribute

It's already supported in most browsers and for older ones there is a jquery plugin providing shim implementation that can be found here.

For styling the placeholder text, refer to this (live examples included):
HTML5 Placeholder Styling with CSS

Answer 3

Another way is to use some CSS, create an image with the background text you want, and set that as the background image of the text box, then when the text box get's focus you could switch styles to remove that background image.

Answer 4

JQuery Implementation

<input type="text" id = "textField" value="Google" class="RegularText GhostText" />

<style>
.GhostText{color:#DDD}
.RegularText{color:#CCC}
</style>

<script type="text/javascript" language="javascript">
$("#textField").blur(function(e){
    if ($.trim(e.target.value) == "") {
        e.target.value = e.target.defaultValue;
        e.target.toggleClass("GhostText");
    }
});
$("#textField").focus(function(e){
    if ($.trim(e.target.value) == e.target.defaultValue) {
        e.target.value = "";
        e.target.toggleClass("GhostText");
    }
});
</script>

Answer 5

Why roll your own? Use this plugin.

Answer 6

  $(selector).text('Google'); 
  $(selector).click(function(){
    $(this).text('');
  });

There's probably a more elegant way to do it, but this assumes your box has no text in it at page load. If it does you can remove the first line.

I haven't tested this, but it should work.