HTML5 inside a very nice feature is the ability to expand in the text box above to add placeholder text. Placeholder text (PlaceHolder) is when a text box is not displayed when the focus is the prompt text, when he was shown after clicking the blank. This feature is very good, but not all browsers support. This article will discuss how to use a relatively simple way to make all browsers support this feature.
Abstract: placeholder text (PlaceHolder) is when a text box is not displayed when the focus is the prompt text, when he was shown after clicking the blank. This feature is very good, but not all browsers support. This article will discuss how to use a relatively simple way to make all browsers support this feature.
input.val ( #39;);< br /> input.addClass ( laceholder ;
{
input.val ( #39;);< br /> input.removeClass ( laceholder ;
$ (this);
{this.value = #39;;}”< br /> If you want your site to use this thing, need to introduce jQuery and Modernizr, Note be placed in the right path, and then copy the code below into.
}). blur (function ()
value = “Search”
if (! Modernizr.input.placeholder) {
{
none;

display: none;
This text is set in the value attribute which, when focused after, test text box value is equal to the default value, if it is empty text box when the text box loses focus, and then check whether the empty, empty, then write the default value. This method is very efficient, and each had to detect the text box.
input [type = "search "]::- webkit-search-decoration,
input.val (input.attr ( laceholder );< br />$( placeholder] . focus (function ()
Now with HTML5, the attribute set by the placeholder setting than the value of more than semantic, however, this property is not all browsers support, so we need the support of jQuery and Modernizr.
}
});< br />$( placeholder] . parents ( form . submit (function ()

remove Webkit search box style
Webkit core browser search box will add some extra style, the CSS can be removed by following this pattern:
$ (this). find ( placeholder] . each (function () < br /> here Modernizr is used to detect whether the browser supports a number of HTML5 attribute if the browser does not support, then run the jQuery code and it will first find all the elements with a PlaceHolder properties, and then stored in a variable and then will be elements of value and this variable contrast, if the placeholder is empty then display the contents inside, and will add a “placeholder” css style.