Because placeholder is a new property of HTML5, it cannot be displayed under IE8, IE9, and has compatibility issues.
Solution Ideas:
1. Determine if the current browser supports the placeholder property
2. If not supported, set the value value of the input tag of type= "text" to placeholder , simulate the placeholder effect, and if type= "password", add a The INPUT element of the type= "password" is simulated.
Code:
<Div> <inputID= "Account"style= "height:45px; padding:6px 25px; line-height:31px"type= "text"class= "Form-control"placeholder= "username/Phone Number" ></Div><DivID= "Pwddiv"> <inputID= "Password"style= "height:45px; padding:6px 25px; line-height:31px"type= "Password"class= "Form-control"placeholder= "Password"></Div>
(function($){ //determine if the browser supports the placeholder property varSupportplaceholder = ' placeholder 'inchDocument.createelement (' Input '); //Initialize varplaceholder =function(input) {varText = input.attr (' placeholder '); varDefaultValue =Input.defaultvalue; if(!defaultvalue && input.attr (' type ') = = "Text") {input.val (text); } }; //the placeholder function is called when the browser does not support the placeholder property if(!Supportplaceholder) { $(' <input id= ' showpwd "style=" height:45px; padding:6px 25px;line-height:31px "type=" text "class=" Form-control "placeholder=" password ">". AppendTo (' #pwdDiv '); $(' #password '). Hide (); $(' input '). each (function() {placeholder ($ ( This)) }); $("Input"). Focus (function () { varplacetexr=$ ( This). attr ("placeholder"); varValue = $ ( This). attr ("value"); //alert (PLACETEXR); if($( This). attr ("id") = = "Showpwd"){ $( This). Hide (); $(' #password '). Show (). focus (); }Else if($( This). attr ("type") = = "Text" && $ ( This). val () = =PLACETEXR) { $( This). Val (""); } }); $("Input"). Focusout (function () { varplacetexr=$ ( This). attr ("placeholder"); vartest=$ ( This). Val (); if($( This). attr ("id") = = "Password" && $ ( This). val () = = ""){ $( This). Hide (); $(' #showpwd '). Show (); } if($( This). attr ("type") = = "Text" && $ ( This). val () = = "" ){ $( This). Val (PLACETEXR); } }); } })($);
JS Solution IE8, 9 under the placeholder compatibility problem