Adding input prompts to HTML form fields

I'm looking for a good way to add input prompts to my HTML form fields- The same way StackOverflow uses light gray text as prompts within all of its text fields.

Figured there wou开发者_开发百科ld be a jQuery plugin out there, but so far haven't found anything good. Anybody?

See the answers to this question: Jquery default value in password field

In html5 you can do this:

<input type="text" placeholder="Default Value"/>

This is what SO does if you view the search bar on top:

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

If you mean having light grey text inside the form field, you can use the placeholder attribute in recent browsers:

<input type="text" placeholder="This text will appear inside the form field until the user focuses it">

I don’t know of any packaged jQuery plug-ins that mimic this functionality in browsers that don’t support placeholder, but here’s an example of how to do it yourself in jQuery:

• http://web.enavu.com/design/css/use-html5-placeholder-input-attribute-today-using-jquery/

You can use either HTML5 or javascript/jquery.

HTML5:

<input type="text" placeholder="The text box" />

jquery:

var textbox = $('input:text');

// Use external css. This is just for example purposes
textbox.css({ color: '#bbb' }).val('the text box');

textbox.focus(function(){
 var that = $(this);

 that.removeAttr('style');
 that.val(''); // Empty text box

}).blur(function(){
 var that = $(this);

 that.css({ color: '#bbb' });  // Use external css
 $(this).val('the text box'); // Refill it

});

I was having the same issues but using IE 8 didn't allow me the option of HTML 5 I used the following code that was inspired by Kyle Schaeffer.

  $.fn.fieldPrompt = function () {
/*Add the two CSS elements to the application css file.  They control the wrapping element and the prompt element
.prompt_element {display:inline-block; position:relative; }
.prompt_element .prompt_field {display:inline-block; color:#888; font-style:italic; position:absolute; left:5px; top:2px; }*/

var $this = $(this);
$('input[type=text][title],input[type=password][title],textarea[title]', $this).each(function (i) {
  if ($(this).parent().hasClass('prompt_element') == false) { //if prompt already exists then skip
    $(this).wrap('<div class="prompt_element" ></div>');      //wrap the element with the prompt element
    _promptfieldClassName = 'prompt_' + $(this)[0].uniqueID;
    var _promptfield = '<div class="prompt_field ' + _promptfieldClassName + '" >' + $(this).attr('title') + '</div>'    //Create the prompt field
    $(this).before(_promptfield)                              // Add the prompt field to the Prompt element.  The  
    if ($.trim($(this).val()) != '') {                                //Check if the field has a value
      $(this).prev().hide();                                  //Hide the prompt if field has a value
    };
    $('.prompt_field').focus(function () {                    //If the prompt field get the focus - move to the next field which should be the input
      $(this).next().focus();
    });
    $(this).on('keypress paste', function () {                //If field has keypress or paste event was triggered
      $(this).prev().hide();                                  //hide the prompt field
    });
    $(this).blur(function () {                                //If leaving the field element 
      if ($.trim($(this).val()) == '') {                      //Check if the value is empty
        $(this).prev().show();                                //Show the prompt
      }
      else {
        $(this).prev().hide();                                //Hide the prompt. This can be initiated by other events if they fill the field.
      }
    });
  };
});
return $(this);

}

When using the Jquery autocomplete function I only had to add in $(this).blur(); statement on the change option function. This ensured the blur event was triggered after all other autocomplete events were finished to ensure a check on the field was done for resetting the prompt if needed.

$(...).autocomplete({change:function(){ $(this).blur(); }})