Home > Web Front-end > H5 Tutorial > body text

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

黄舟
Release: 2017-03-23 15:48:30
Original
2642 people have browsed it

 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>
Copy after login

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>
Copy after login

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;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template