A placeholder is a property that a text box uses to prompt the content, such as:
<input id="txt"type="text" name="account" placeholder="请输入帐号">
will appear as:
However IE9 does not support this attribute, you can use JS to simply simulate the placeholder behavior.
My basic idea is to set the value for the input box and set the font color to simulate placeholder based on the input box contents.
For the Password input box placeholder property implementation, my idea is to add a normal text input box in the location of the password box, when you click on the input box to hide it, display the original password input box and set the focus.
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src=".. /jquery.js "></script> <style> input{ width:px; Height: +px; vertical-align: Middle; } . Hint{ color:#666; } . Hide{ display: none; } </style></head><body> <form Action= " method="get ">Text box:<input id="txt" type= "text" name="Account" placeholder="Please enter account"> <hr>Password box:<span> <input id="pwd" type="password" name="Password" Placeholder="Please enter password"><input id="Pwdspan" type="text" placeholder ="Please enter password"> </span> <button type="Submit" onclick="Submit ()">Submit</button> </form> <script>$ (function(){ $ ("#pwdSpan"). Hide (); }) </script> <!--[if LTE IE 9]> <script src= "Ie.js" ></script> <! [endif]--></body></html>Ie.js:
$( function(){ vartxtholder=$ ("#txt"). attr ("Placeholder");varpwdholder=$ ("#pwdSpan"). attr ("Placeholder"); $("#txt"). Val (Txtholder). addclass ("Hint"); $("#pwdSpan"). Val (Pwdholder). addclass ("Hint"). Show (); $("#pwd"). Hide (); $("#txt"). Focus ( function(){ if($( This). val () = = Txtholder) {$ ( This). Val (""). Removeclass ("Hint"); }}). blur ( function(){ if($( This). Val (). Trim () = = =""){ $( This). Val (Txtholder). addclass ("Hint"); } }); $("#pwdSpan"). Focus ( function(){$( This). CSS ("Display","None"); $("#pwd"). Show (). focus (); }) $("#pwd"). Blur ( function(){ if($("#pwd"). Val (). Trim () = =""){ $( This). Hide (); $("#pwdSpan"). Show (); } })})Since Chrome and other browsers natively support the placeholder property, it is necessary to determine the browser type and then load the JS file.
IE Chinese text input box and password input box The default size is slightly different, need to define together;
and two input boxes cannot be displayed in the horizontal hold alignment. As long as vertical-align: middle; you add it.
Initial state:
After entering some content:
Of course, this only stays in the implementation, if can be in the form of plug-ins, the function will be stronger.
Implement placeholder functionality in IE9
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
