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.