The two methods are based on jQuery to Implement IE browser compatibility with placeholder _ jquery

This article mainly introduces two methods to Implement IE browser compatibility with placeholder Based on jQuery. For more information about how placeholder is HTML5, see Different browsers (modern browsers that support HTML5) have slightly different display effects:

In Chrome (v31.0.1650.63 m), Firefox (v21.0), 360 security (v6.3 speed mode), after the focus is obtained in the input column, the prompt text does not disappear. (Chrome ):

Before getting the focus:

When getting focus:

But IE11 has something special to do:

Before getting the focus:

When getting focus:

That is to say, the prompt text disappears when the focus is obtained.

Non-modern browsers such as IE6-IE9 do not support the placeholder attribute. Now jQuery is used to make these non-modern browsers can also achieve the Display Effect of placeholder. The first method is to achieve the effect of IE11, that is, when the input box gets the focus, the prompt text will disappear; if you want to get the effect similar to Chrome, that is, when the input box gets the focus, the prompt text does not disappear, you can use the second method.

Method 1

Effect preview:

Http://jsfiddle.net/L57b25yr/embedded/result/

The idea is to first determine whether the browser supports the placeholder attribute. If not, traverse all input boxes and obtain the value of the placeholder attribute and fill it in the input box as the prompt information, and set the font to Gray.

When the input box obtains the focus and the text in the input box is the same as the set prompt information, the input box is cleared;

When the input box loses the focus (blur) and the text in the input box is empty, the obtained placeholder attribute value is filled in the input box as the prompt information, and the font is set to gray;

When there is a keydown in the input box, the prompt information in the input box has been cleared by the focus event. In this case, you only need to restore the font to black.

The disadvantage of this method is that it is not applicable to the input box that gets the focus when the DOM is loaded, because the input box that gets the focus is displayed when the page is loaded from the user's perspective, its prompt text is invisible.

HTML:

CSS:

.phcolor{ color:#999;}

JS:

$ (Function () {// determines whether the browser supports the placeholder attribute supportPlaceholder = 'placeholder' in document. createElement ('input'), placeholder = function (input) {var text = input. attr ('placeholder '), defaultValue = input. defaultValue; if (! DefaultValue) {input. val (text ). addClass ("phcolor");} input. focus (function () {if (input. val () = text) {$ (this ). val ("") ;}}); input. blur (function () {if (input. val () = "") {$ (this ). val (text ). addClass ("phcolor") ;}}); // The input character is not gray input. keydown (function () {$ (this ). removeClass ("phcolor") ;};}; // call the placeholder function if (! SupportPlaceholder) {$ ('input '). each (function () {text = $ (this ). attr ("placeholder"); if ($ (this ). attr ("type") = "text") {placeholder ($ (this ));}});}});

After testing, the display effect of IE11placeholder can be achieved.

Method 2

The idea of this method is to make an image containing prompt text as the background image of the input box, and get the focus at the beginning and load the background image;

The background image is as follows:

When the input box is not blank, remove the background image;

When the input box is blank, the background image is loaded;

When you press the keyboard button and the input box is not empty (input characters), remove the background image;

When you press the keyboard button and the input box is empty (delete character), the background image is loaded.

The disadvantage of this method is that you need to create a background image for each prompt text and set the input style.

The HTML code remains unchanged.

CSS:

.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}

JS:

$ (Function () {// determines whether the browser supports the placeholder attribute supportPlaceholder = 'placeholder' in document. createElement ('input'); if (! SupportPlaceholder) {// Add a background image in the initial state $ ("# uname "). attr ("class", "phbg"); // obtain the focus in the initial state $ ("# uname "). focus; function destyle () {if ($ ("# uname "). val ()! = "") {$ ("# Uname "). removeClass ("phbg");} else {$ ("# uname "). attr ("class", "phbg") ;}// when the input box is empty, add a background image. If there is a value, remove the background image destyle (); $ ("# uname "). keyup (function () {// when a key is input in the input box and the input box is not empty, remove the background image. When a key is input at the same time (delete characters ), add the background image destyle () ;}); $ ("# uname "). keydown (function () {// The keydown event can be removed immediately after the key is pressed $ ("# uname "). removeClass ("phbg ");});}});

This method ends now.

This method displays the effect in IE8 of IETester:

When getting focus:

When the focus is lost:

When input is available:

If a friend has a better method, you are welcome to discuss it.