Two methods based on jquery to achieve the compatibility placeholder effect of IE browser

Placeholder is one of the attributes of html5<input>, with a slightly different display effect in different browsers (modern browsers that support HTML5):

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

Before you get focus:

When you have the focus:

But IE11 to do something special:

Before you get focus:

When you have the focus:

That is, the text that is prompted when you get the focus disappears.

Non-modern browsers, such as IE6-IE9, do not support placeholder properties. Now using jquery to make these non-modern browsers can also achieve placeholder display effect, the first method is to achieve the effect of IE11, that is, the input box to get focus when the prompt text will disappear; If you want to get a chrome-like effect, That is, the prompt text does not disappear when the input box has the focus, you can use the second method.

Method One

Effect preview:

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

The idea is, first of all, to determine whether the browser support placeholder properties, if not supported, the traversal of all input input boxes, get the value of the placeholder property filled into the input box as a hint, and the font is set to gray.

Empty the input box when the input box has the focus and the text in the box is equal to the message set;

When the input box loses focus (blur) and the input box is empty, the value of the acquired placeholder property is filled into the input box as the cue message, and the font is set to gray;

When the input box has input (KeyDown), the prompt in the input box has been cleared by the focus event, and the font can only be restored to black.

The disadvantage of this approach is that it does not apply to the input box that gets the focus when the DOM is loaded, because at the user's point of view, the input box that receives the focus when the page is loaded is not visible to the prompt text.

Html:

<input type= "text" id= "uname" name= "uname" placeholder= "Please enter username"/>

Css:

. phcolor{color: #999;}

Js:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30-31 This is the same as the same as the other, of the

$ (function () {        //to determine whether the browser supports placeholder properties   supportplaceholder= ' placeholder ' in document.createelement (' input '),       Placeholder=function (input) {       var text = input.attr (' placeholder '),      defaultvalue = Input.defaultvalue;        if (!defaultvalue) {          Input.val (text). addclass ("Phcolor");    &NBSP}        input.focus (function () {          if (input.val () = = text) {              $ (This). Val ("");       }     });            input.blur (function () {          if (input.val () = "") {                 $ (This). val (text). AddClass ("Phcolor");       }     });        //The character entered is not a gray     input.keydown (function () {           $ (this). Removeclass ("Phcolor");     });   };      //When the browser does not support the placeholder property, call the placeholder function   if (!supportplaceholder) {        $ (' input '). each (function () {         text = $ (this). attr ("placeholder");          if ($ (this). attr ("type") = = "Text" {            placeholder ($ (this));       }     });   }   });

After the test can achieve ie11placeholder display effect.

Method Two

The idea of this method is to make a picture containing the hint text as the background of input box, and to get the focus at the same time to load the background image;

The background figure is as follows:

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

When the input box is empty, load the background image;

When the user keyboard keys and the input box is not empty (input characters), remove the background image;

Loads the background image when the user's keyboard is pressed and the input box is empty (delete characters).

The disadvantage of this method is that you need to make a background picture for each input that is different from each hint text, and set the input style.

The HTML code does not change.

Css:

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

Js:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 This is the

This method ends here.

This method displays the effect under the IETester IE8:

When you have the focus:

When you lose focus:

When there is input:

If you have friends who have a better way, welcome to the exchange of discussions.