Question

Im looking to create an input text field that has greyed out text which shows what the text field is used for, this text should be then removed when a character is input

for example in facebook when you click on the search input text area, before you input any characters you will see the word “search” still displayed.

I don’t know where to start in JQuery as I have no idea what this feature is called, but below is the mark-up for my input field

HTML Markup

<div class="searchForm">
   <input id="searchInput" value="Search"  autocomplete="off" name="searchInput"   
      onkeyup="showResult(this.value)"/>
   <input type="hidden" name="searchSite" value="1" style="background-color:#000;">
   <input id="searchButton" type="submit" value=""/>
</div>

Answer 1

As the other answers suggested, I suggest using the HTML 5 placeholder attribute. For browsers that don’t support this, you can add support as follows:

// This adds 'placeholder' to the items listed in the jQuery .support object. 
jQuery(function() {
    jQuery.support.placeholder = false;
    test = document.createElement('input');
    if ('placeholder' in test) jQuery.support.placeholder = true;
});

$(function() {
    // add placeholder support to browsers that wouldn't otherwise support it. 
    if (!$.support.placeholder) {
        var active = document.activeElement;
        $(':text,:password').focus(function() {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function() {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });

        $(':text,:password').blur();
        $(active).focus();
        $('form:eq(0)').submit(function() {
            $(':text.hasPlaceholder,:password.hasPlaceholder').val('');
        });
    }
});​

This code originated from here: http://www.cssnewbie.com/example/placeholder-support/

I modified it to support password fields (although they just show up as *’s) and have been using it successfully. I like it because I just use the HTML placeholder attribute and everything works good across the board.

Hope this helps!