Text Input with descriptive text

Question

Hello,

I was wondering if there's an easy way with javascript (including JQuery, which we're using on the site) to put descriptive text in a text input until the user clicks it to type in their own text.

For instance I'd like to put the word 'Search' in a text input (preferrably in a lighter color than real input) until the user clicks the input, when it disappears and allows them to type in their search terms.

I don't want to actually have the word 'Search' be the value of the text input though, because it is somewhat important that the user can search for the word search.

I was thinking of absolute positioning a <p> element with the word search over the input and hiding it when it (or the input) is clicked.

What do you think? is this horribly misguided?

Answer 1

You can set the initial value of the search input to "Search" and then add an onClick listener to remove it.

$("input.search-term").one("click", function() { $(this).removeAttr("value"); });

It won't impact the user's ability to search for "search." This is a much cleaner approach than trying to finagle a <p> or <label> element over the input.

EDIT: You are all absolutely right - removing the value on each click is poor UX. That's what I get for answering quickly. :) Updated to only remove the initial value.

Answer 2

For years there has been a popular "project" known as labels.js, orignally written by Aaron Boodman of the old youngpup.net. The idea is still around and there exists a jQuery version, even (demo #4).

Answer 3

I would do something like this in jQuery:

$("input.searchterm").click(function() { 
  var $input = $(this);
  if ($input.val() == "enter search term") $input.val("");
};

This way users won't lose what they have typed previously upon clicking again. The value would only be cleared if it is the default value you assign to the input field.

Answer 4

I recently bumped into the jQuery Form Example plugin that does just what you want. The github page for the project is here. With that plugin, you can display a placeholder value that will vanish on click with just this:

$('input#search').example('Search');

Answer 5

I don't want to actually have the word 'Search' be the value of the text input though, because it is somewhat important that the user can search for the word search.

In that case you could use a background-image on the text-input. You could define in CSS that :focus should not have the background and that the unfoucused should have it. This solution works even if javascript is disabled.

Update: Tested and work with FF, Opera and Chrome but not IE, since IE don't support :focus, but IE supports the background image, so if the text is light gray is should not be a problem. And you can always use jquery to change what classed the input field should have.

Answer 6

For reference, this technique is often called watermarking.

Answer 7

I was looking for this solution not long ago and came cross this

/**
* @author Remy Sharp
* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
*/

(function ($) {

$.fn.hint = function (blurClass) {
  if (!blurClass) { 
 blurClass = 'blur';
  }

  return this.each(function () {
 // get jQuery version of 'this'
 var $input = $(this),

 // capture the rest of the variable to allow for reuse
   title = $input.attr('title'),
   $form = $(this.form),
   $win = $(window);

 function remove() {
   if ($input.val() === title && $input.hasClass(blurClass)) {
  $input.val('').removeClass(blurClass);
   }
 }

 // only apply logic if the element has the attribute
 if (title) { 
   // on blur, set value to title attr if text is blank
   $input.blur(function () {
  if (this.value === '') {
    $input.val(title).addClass(blurClass);
  }
   }).focus(remove).blur(); // now change all inputs to title

   // clear the pre-defined text when form is submitted
   $form.submit(remove);
   $win.unload(remove); // handles Firefox's autocomplete
 }
  });
};

})(jQuery);


$(function(){ 
 // find all the input elements with title attributes
 $('input[title!=""]').hint();
});

Answer 8

You may want to check this out: http://www.newmediacampaigns.com/page/nmcformhelper

Basically, HTML 5 supports the placeholder attribute for input elements:

<input type="text" placeholder="Your browser supports placeholder text" size=38>

WebKit (Chrome and Safari) supports this now, but for other browsers like Firefox and IE, you can use this script to simulate the effect using Javascript when the browser doesn't support the HTML 5 feature.