JQuery implements the placeholder effect of the following IE10 browsers

/**/

Placeholder is one of the attributes of html5<input>, and it can be displayed differently in different browsers:

In Chrome (v31.0.1650.63 m), Firefox (v21.0), 360 security (v6.3 speed mode), the input bar has the focus and the text doesn't go away, (chrome):

Before getting focus:

When you get focus:

IE11 to do something special:

Before getting focus:

When you get focus:

This means that the text that is prompted when the focus is received disappears.

Non-modern browsers (such as IE6-IE9) do not support the placeholder property. Now use jquery to make these non-modern browsers also can achieve placeholder display effect, the first method is to achieve IE11 this effect, that is, the input box to get the focus of the text will disappear, if you want to get the effect like chrome, That is, the input box to get focus when the prompt text does not disappear, you can use the second method, although the second method is somewhat flawed, but there is no better way to achieve this effect, hope to have a good method of friends enlighten.

Method One

Effect preview:

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

The idea is to first determine whether the browser supports the placeholder property, and if not, iterate through all input boxes, get the value of the placeholder property into the input box as a cue message, and the font is grayed out.

Empty the input box when the input box has the focus and the text in the box is equal to the setting's prompt information;

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

When there is input (KeyDown) in the input box, the prompt information in the input box has been cleared by the focus event, so that only the font can be restored to black at this time.

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 in the user's perspective, the input box that gets the focus when the page is loaded is not visible in the hint text.

Html:

<type= "text"  ID= "uname"  name= "uname"  Placeholder= "Please enter user name"/>

Css:

. Phcolor { color:#999;}

Js:

1$(function(){   2 3     //determine if the browser supports the placeholder property4supportplaceholder= ' placeholder 'inchDocument.createelement (' Input '),5 6Placeholder=function(input) {7 8         varText = input.attr (' placeholder '),9DefaultValue =Input.defaultvalue;Ten  One         if(!DefaultValue) { A  -Input.val (text). addclass ("Phcolor"); -         } the  -Input.focus (function(){ -  -             if(Input.val () = =text) { +      -$( This). Val (""); +             } A         }); at  -   -Input.blur (function(){ -  -             if(Input.val () = = ""){ -              in$( This). val (text). addclass ("Phcolor"); -             } to         }); +  -         //the character entered is not gray theInput.keydown (function(){ *    $$( This). Removeclass ("Phcolor");Panax Notoginseng         }); -     }; the  +     //the placeholder function is called when the browser does not support the placeholder property A     if(!Supportplaceholder) { the  +$ (' input '). each (function(){ -  $Text = $ ( This). attr ("placeholder"); $  -             if($( This). attr ("type") = = "Text"){ -  thePlaceholder ($ ( This)); -             }Wuyi         }); the     } -  Wu});

The test can achieve the Ie11placeholder display effect.

Method Two

The idea of this method is to make a picture containing the hint text as input box background image, initially get focus while loading background map;

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

When the input box is empty, the background map is loaded;

When the user keyboard key and the input box is not empty (input character), the background image is removed;

The background map is loaded when the user's keyboard key is pressed and the input box is empty (delete character).

The disadvantage of this approach is that when KeyUp determines that a user has input, the time the background graph disappears is slightly later than the time that the text appears in the input box. This is in the KeyUp event, when the keyboard is pressed, the text appears in the input box, and when the button bounces, the action to remove the background image is triggered.

The HTML code does not change.

Css:

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

Js:

1$(function(){   2 3supportplaceholder= ' placeholder 'inchDocument.createelement (' Input ');4 5           if(!Supportplaceholder) {6 7$ ("#uname"). attr ("Class", "PHBG"));8$ ("#uname"). Focus;9 Ten              functionDestyle () { One               A                 if($ ("#uname"). val ()! = ""){ -                      -$ ("#uname"). Removeclass ("PHBG")); the}Else{ -                  -$ ("#uname"). attr ("Class", "PHBG")); -                  } +              } -               + Destyle (); A  at$ ("#uname"). KeyUp (function(){ -  - Destyle (); -              }); -           } -});

This method ends here.

JQuery implements the placeholder effect of the following IE10 browsers