HTML5 practice-implementation of cross-browser HTML5 text placeholder-detailed introduction of placeholder

　html5 has enhanced a function for the web form, which is the input placeholder-placeholder. The function of the placeholder is that when the input content is empty or not focused, the input displays the content of the placeholder. This is a great feature, but not all browsers support it. This tutorial will introduce you to how to use Modernizr Class Library to determine whether the browser supports this attribute, and then use jquery to dynamically display the placeholder.

Previous implementation using JavaScript

In the days when there was no placeholder attribute, we used JavaScript to simulate its implementation. In the example below, we add a value attribute to input. When the input is focused, we determine whether the value of value is 'search', and if so, clear the content. When the input loses focus, we determine whether the content is empty, and if it is empty, set the value to 'search'.

<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="Search"</span><span style="color: #ff0000;"> <a href="http://www.php.cn/wiki/1465.html" target="_blank">onfocus</a></span><span style="color: #0000ff;">="<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a> (this.value == &#39;Search&#39;) {this.value = &#39;&#39;;}"</span><span style="color: #ff0000;"> <br/>　　<a href="http://www.php.cn/wiki/1463.html" target="_blank">onblur</a></span><span style="color: #0000ff;">="if (this.value == &#39;&#39;) {this.value = &#39;Search&#39;;}" /</span><span style="color: #0000ff;">></span>

Use jquery to generate placeholders

Now we use HTML5 placeholder. Semantically speaking, it can express our intention better than the value attribute. But not all browsers support this attribute, so we need to use Modernizr and jQuery to help us.

Modernizr is used to determine whether the browser supports the placeholder attribute. If it does not support it, it runs the jquery statement. He will find all html elements that contain placeholder attributes and store them in variables. When an element gains and loses focus, the script will determine the value and placeholder value to determine the final content of the value.

If you want to use this feature in your site, you need to download the modernizr and jquery libraries and ensure that their reference addresses are correct.

<script src="jquery.js"></script>
<script src="modernizr.js"></script>

<script>(!&#39;[placeholder]&#39;).focus( input = $( (input.val() == input.attr(&#39;placeholder&#39;&#39;&#39;&#39;placeholder&#39; 
input = $( (input.val() == &#39;&#39; || input.val() == input.attr(&#39;placeholder&#39;&#39;placeholder&#39;&#39;placeholder&#39;&#39;[placeholder]&#39;)
.parents(&#39;form&#39;).submit().find(&#39;[placeholder]&#39;).each( input = $( (input.val() == input.attr(&#39;placeholder&#39;&#39;&#39;</script>

Removing the webkit search box style

The webkit browser adds additional styles to the search box. We need to use the following script to remove it.

input[type=search] {    -webkit-appearance: none;}input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

Okay, this lesson ends here.

The above is the detailed content of HTML5 practice-implementation of cross-browser HTML5 text placeholder-detailed introduction of placeholder. For more information, please follow other related articles on the PHP Chinese website!