Analysis and solutions to the incompatibility problem of HTML5 Placeholder new tag in lower version browsers

Analysis and solutions to the incompatibility problem of HTML5 Placeholder new tag in lower version browsers _html5 tutorial skills

WBOY

Release： 2016-05-16 15:46:02

Original

1825 people have browsed it

The placeholder attribute is a new attribute in HTML5, commonly known as "placeholder". Its function is similar to that of an input box. When it gets focus, the default value will become blank, and when it loses focus, it will display the default text. , I think everyone must have used js/jquery to create such an effect. Currently, it is only supported by 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. Provide a placeholder on the input to display the hint information (hint) of the expected value of the input field in text form. The field will be displayed when the input is empty.
Example:

Copy code

The code is as follows:

Placeholder is very convenient to operate, which improves development efficiency. At the same time, the user experience is also very good in higher version browsers, so I like to use this attribute very much.
However, it is invalid in browsers below IE9, and IE10 supports the placeholder attribute, and its performance is inconsistent with other browsers
•In IE10, the placeholder text disappears when the mouse is clicked (gets focus)
• Firefox/Chrome/Safari clicks do not disappear, but the text disappears when typing on the keyboard
So as a developer, should I overcome this problem? There are currently a bunch of similar solutions on the Internet, and the implementation ideas are roughly divided into two types:
1. (Method 1) Use the value of the input as the display text, simulate the gray style, and focus on $("[placeholder]").val ()=="", blur $("[placeholder]").val(this.defaultValue);
2. (Method 2) Do not use value, add an additional tag (span) to the body and then Absolute positioning covers the input.
Since the first method is implemented here, it occupies the value and requires additional judgment during verification, so I personally recommend using the second method.
First, determine whether the current browser supports the placeholder attribute:

Copy the code

The code is as follows:

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

Key code on

Copy code

The code is as follows:

/*
*placeholder is compatible with ie9 and below Author: Gao Fengming add 2016-1-27
*/
$(function(){
if(!placeholderSupport()){ // Determine whether the browser supports placeholder
$(document).ready(function(){
//The default traversal loop adds placeholder
$('[placeholder]').each(function(){
$(this). parent().append("" $(this).attr('placeholder') "");
})
$('[ placeholder]').blur(function(){
if($(this).val()!=""){ //If the current value is not empty, hide the placeholder
$(this).parent ().find('span.placeholder').hide();
}
else{
$(this).parent().find('span.placeholder').show();
}
})
});
}
});

The above content introduces to you the analysis and solutions of the incompatibility of the new HTML5 Placeholder tag in lower version browsers. I hope it will be helpful to you.