Shulou(Shulou.com)06/03 Report--

Placeholder in HTML5 solves the example analysis of incompatibility in low-version browsers with new tags. In view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Placeholder attribute is a new attribute in HTML5, commonly known as "placeholder", the function is similar to the input box in the focus, when the default value of the face will become blank, when the loss of focus will show the default text, I think we must have used js/jquery to create such an effect. At present, it is only supported in modern browsers such as Mozilla Firefox 3.7 +, Apple Safari 4 +, Google Chrome 4 + and Opera11+. "

The placeholder attribute is added for input in HTML5. A placeholder is provided on the input that displays a text prompt (hint) for the expected value of the input field, which is displayed when the input is blank.

Example:

The code is as follows:

Placeholder is very convenient to operate, improves development efficiency, and has a good user experience in high-version browsers, so I like to use this attribute very much.

However, browsers are invalid in versions below IE9, and IE10+ supports the placeholder attribute, which is inconsistent with other browsers

Placeholder text disappears when you click the mouse in IE10+ (get focus)

Firefox/Chrome/Safari clicks don't disappear, but text disappears when you type on the keyboard.

So whether a developer should overcome this problem or not? At present, there are a number of similar solutions on the Internet, which can be roughly divided into two ways:

1. (method 1) use the value of input as the display text to simulate the gray style. Focus lets $("[placeholder]") .val () = "", $("[placeholder]") .val (this.defaultValue) when blur.

two。 (method 2) instead of using value, add an extra span to the body and then absolutely position the overlay on the input.

Here, because the first way is implemented, takes up the value and needs to make additional judgments during verification, then I personally recommend using the second way.

First, determine whether the current browser supports the placeholder attribute:

The code is as follows:

Function placeholderSupport () {return 'placeholder' in document.createElement (' input');}

The key code on:

The code is as follows:

/ * * placeholder is compatible with the following author of ie9: Gao Fengming add 2016-1-27 * / $(function () {if (! placeholderSupport ()) {/ / determine whether the browser supports placeholder $(document) .ready (function () {/ / add placeholder $('[placeholder]') .each (function () {$(this). Parent (). Append ("+ $(this) .attr ('placeholder') +")) }) $('[placeholder]') .blur (function () {if ($(this). Val ()! = ") {/ / if the current value is not empty, hide placeholder $(this). Parent (). Find ('span.placeholder'). Hide ();} else {$(this). Parent (). Find (' span.placeholder'). Show ();})}) This is the answer to the problem of Placeholder in HTML5 to solve the incompatible sample analysis under the new tag low-version browser. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.