Analysis and Solution to incompatibility issues in browsers with new HTML5Placeholder labels of earlier versions _ html5 tutorial skills-

The placeholder attribute is added for input in HTML5. A placeholder is provided in input to display the hint of the expected value of the input field in text format. When the input is empty, the placeholder attribute is a new attribute in HTML5, the common name is "Placeholder". The function is similar to that when the input box gets the focus, the default value will be blank, and the default text will be displayed when the focus is lost, I think you must have created this effect using js/jquery. Currently, only modern browsers such as Mozilla Firefox 3.7 +, Apple Safari 4 +, Google Chrome 4 +, and Opera11 + are supported ."
The placeholder attribute is added for input in HTML5. A placeholder is provided on input to display the hint of the expected value of the input field in text format. This field is displayed when the input is empty.
Instance:

The Code is as follows:

Placeholder is easy to operate and improves development efficiency. It also provides a good user experience in high-version browsers, so I like this attribute very much.
However, browsers earlier than IE9 are invalid, and IE10 + supports the placeholder attribute, which is inconsistent with other browsers.
• The placeholder text disappears when you click (get focus) in IE10 +.
• Firefox/Chrome/Safari click does not disappear, but the text disappears when the keyboard is entered
As a developer, should we overcome this problem. There are also a bunch of similar solutions on the Internet. There are two ways to achieve this:
1. (method 1) Use the input value as the displayed text, simulate the gray style, and focus $ ("[placeholder]"). val () = "", blur $ ("[placeholder]"). val (this. defaultValue );
2. (method 2) If no value is used, add an extra tag (span) to the body and then absolutely overwrite the input.
Here, because the first method is implemented, it occupies the value and requires additional judgment during verification, so I suggest using the second method.
First, determine whether the current browser supports the placeholder attribute:

The Code is as follows:

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

Key code:

The Code is as follows:

/*
* Placeholder is compatible with author below ie9: Gao fengming add
*/
$ (Function (){
If (! PlaceholderSupport () {// determines whether the browser supports placeholder
$ (Document). ready (function (){
// Add placeholder in the traversal loop by default
$ ('[Placeholder]'). each (function (){
$ (This). parent (). append ("" + $ (this). attr ('holder') + "");
})
$ ('[Placeholder]'). blur (function (){
If ($ (this). val ()! = "") {// If the current value is not blank, hide placeholder
$ (This). parent (). find ('span. placeholder '). hide ();
}
Else {
$ (This). parent (). find ('span. placeholder '). show ();
}
})
});
}
});

The above content introduces the problem analysis and solutions of incompatibility with HTML5 Placeholder in earlier versions of browsers, and hopes to help you.