What is the recommended strategy for input box hint text (such as "Search" overlayed on a search box)?

Question

Many pages have a search box to them which will typically have the overlayed text "Search" which disappears when one focuses the element and reappears when focus is lost. I'm curious to know what people recommend as the best strategy for this.

The strategy I've employed is to use the focus/blur events of the input element and test the content to determine if the value should be changed. In my following example I use jQuery. Take an example where we have an input element with an id of quick-search, when empty I show the text "Search" when focussed I remove the text and update a style,

$(function() {
  $("#quick-search").focus(function() {
    if (this.value === "Search") {
      $(this).removeClass("quick-search-not-focussed");
      this.value = "";
    }
  }).blur(function() {
    if (this.value === "") {
      $(this).addClass("quick-search-not-focussed");
      this.value = "Search";
    }
  });
})

My quick-search-not-focussed class looks as follows:

.quick-search-not-focussed { color: #bbb; }

This works well for me as search boxes can only really be submitted on enter as there is no button, however some scenarios require more input elements with input text overlayed, what are the alternative tricks/techniques you've used? Personally I don't like the use of images in this approach.

Answer 1

jQuery placeholder

Actually, there are quite a few similar plugins. The one I linked is good enough for me.

Answer 2

I've used the following in my code.

<input id="searchBox" 
       class="search-gray" 
       name="q" tabindex="1" 
       onblur=" if (this.value==''){this.value = 'search...'; this.className = 'search-gray'}" 
       onfocus=" this.className = ''; if (this.value=='search...') {this.value = ''}" 
       type="text" 
       value="search...">

<style>
    .search-gray{color:#c5c5c5;}
</style>

EDIT
Here's what StackOverflow uses for their search box

 <input name="q" 
       class="textbox" 
       tabindex="1" 
       onfocus="if (this.value=='search') this.value = ''" 
       type="text" 
       maxlength="80" 
       size="28" 
       value="search">

Answer 3

I usually do something similar to this:

<input type="text" name="email" data-original="Email address" value="Email address" />
<input type="text" name="username" data-original="Username" value="Username" />

<script type="text/javascript">
    $(document).ready(function(){
        $('input[data-original]').each(function(){
            var input = $(this);
            var original = input.attr('data-original');

            input.focus(function(){
                if (input.val() == original)
                    input.addClass('focused').val('');
            });
            input.blur(function(){
                if (input.val() == '')
                    input.removeClass('focused').val(original);
            });
        });
    });
</script>

This is the same as your approach except with the advantage that you don't have to keep repeating your code for each field; instead you can just specify data-original on your fields and they will be good to go.

Answer 4

FWIW, Webkit browsers directly support a placeholder attribute on <input> tags:

​<input placeholder='enter something' />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 5

Have a look at this one: http://fuelyourcoding.com/scripts/infield/

Its different from the others here in that its a bit more usable. The label fades out on field focus and only disappears when you start typing.

and its unobtrusive.