<!doctype html>"en">"UTF-8"> <title>PlaceHolder</title> <style type="Text/css">/*set hint text color*/ ::-webkit-input-Placeholder {color: #838383; } :-moz-Placeholder {color: #838383; }. Placeholder {color: #ccc; } </style> "text"onkeyup="this.value=this.value.replace (/^ +| +$/g, ")">login username, password text hint, mouse away display text HTML5 and jquery<br/> <br/>Account Number:<input type="text"Name="Email"placeholder ='User Account'/><br/> <br/>Password:<input type="Password"Name="Password"placeholder ='Password'Autocomplete="off"/><br/> </body>"Http://js.static.m1905.cn/core/jquery-edge.min.js"></script><script>//determine if the browser supports the placeholder propertyfunction Isplaceholder () {varinput = Document.createelement ('input'); return 'placeholder' inchinput; } if(!isplaceholder ()) {//does not support placeholder using jquery to complete$("input"). Not ("input[type= ' password ']"). each (function () {//Exclude the input binding event password box if($( This). val () = =""&& $ ( This). attr ("placeholder")!=""){ $( This). Val ($ ( This). attr ("placeholder")); $( This). focus (function () {if($( This). Val () ==$ ( This). attr ("placeholder")) $( This). Val (""); }); $( This). blur (function () {if($( This). val () = ="") $( This). Val ($ ( This). attr ("placeholder")); }); } }); //Special handling of the Password box 1. Create a text box 2 to get focus and lose focus when switching varPwdfield = $ ("Input[type=password]"); varPwdval = Pwdfield.attr ('placeholder'); Pwdfield.after ('<input id= "Pwdplaceholder" type= "text" value='+pwdval+'autocomplete= "Off"/>'); varPwdplaceholder = $ ('#pwdPlaceholder'); Pwdplaceholder.show (); Pwdfield.hide (); Pwdplaceholder.focus (function () {pwdplaceholder.hide (); Pwdfield.show (); Pwdfield.focus (); }); Pwdfield.blur (function () {if(Pwdfield.val () = ="') {pwdplaceholder.show (); Pwdfield.hide (); } }); } </script>
Placeholder compatible IE9 The following versions contain Pasword