Self-written by a placeholder simulation
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en"><Head><Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"><title>Document</title><Scripttype= "Text/javascript"src= "Jquery-1.10.2.min.js"></Script><styletype= "Text/css">*{margin:0;padding:0;Border:0;Outline:None;List-style:None;}Body{font-size:12px;}. Inputtext_1{width:200px;Height:16px;Line-height:16px\9;padding:8px 10px;Border:1px solid #ccc;}ul{margin:100px;}ul Li{Margin-top:10px;}</style></Head><Body> <ul> <Li> <inputtype= "text"placeholder= "User name"class= "Inputtext_1" /> </Li> <Li> <inputtype= "Password"placeholder= "Password"class= "Inputtext_1" /> </Li> </ul><Scripttype= "Text/javascript">if(typeofplaceholder== "undefined" || !placeholder)varplaceholder={};(function() {placeholder={check:function(){ return 'placeholder' inchDocument.createelement ('input'); }, FIX:function(h) {if(!Placeholder.check ()) { $('Input[placeholder]'). each (function(i,v) {varv=$ (v), S= $('<span>'+v.attr ('placeholder')+'</span>'); $ (v). Wrap ('<div style= "position:relative;" ></div>'); S.css ({"position":"Absolute", //If the incoming parameter is a parameter height "Height":(H||v.outerheight ()),"Line-height": V.outerheight ()+"px", "Padding-left":p Arseint (V.css ("Padding-left"))+1, " Left":0, "Top":0, "Color":"#a9a9a9"}). InsertAfter (v); V.keyup (function(){ if(V.val ()!=="") s.hide (); Elses.show (); }); S.click (function() {setTimeout (function() {V.focus ();},0) }); }); } } } //If the incoming parameter is a parameter heightPlaceholder.fix ( the);}) ()</Script></Body></HTML>
Simulation of placeholder