HTML5 supports placeholder native. For unsupported browsers (IE), it can be simulated using Js.
JSCode
( Function (){
// Determine whether placeholder is supported
Function Isplaceholer (){
VaR Input = Document. createelement ('input ');
Return "Placeholder" In Input;
}
// Unsupported code
If (! Isplaceholer ()){
// Create a class
Function Placeholder (OBJ ){
This . Input = OBJ;
This . Label = Document. createelement ('label ');
This . Label. innerhtml = obj. getattribute ('holder ');
This .Label.style.css text = 'position: absolute; text-indent: 4px; color: #999999; font-size: 12px ;';
If (Obj. value! = ''){
This . Label. style. Display = 'none ';
}
This . INIT ();
}
Placeholder. Prototype = {
// Location
Getxy: Function (OBJ ){
VaR Left, top;
If (Document.doc umentelement. getboundingclientrect ){
VaR Html = document.doc umentelement,
Body = Document. Body,
Pos = obj. getboundingclientrect (),
St = html. scrolltop | body. scrolltop,
SL = html. scrollleft | body. scrollleft,
Ct = html. clienttop | body. clienttop,
CL = html. clientleft | body. clientleft;
Left = pos. Left + SL-Cl;
Top = pos. Top + st-CT;
}
Else {
While (OBJ ){
Left + = obj. offsetleft;
Top + = obj. offsettop;
OBJ = obj. offsetparent;
}
}
Return {
Left: left,
Top: Top
}
},
// Width and height
Getwh:Function (OBJ ){
Return {
W: obj. offsetwidth,
H: obj. offsetheight
}
},
// Add high-width method
Setstyles: Function (OBJ, Styles ){
For ( VaR P In Styles ){
OBJ. Style [p] = styles [p] + 'px ';
}
},
Init: Function (){
VaR Label = This . Label,
Input = This . Input,
XY = This . Getxy (input ),
Wh = This . Getwh (input );
This . Setstyles (Label, {'width': Wh. w, 'height': Wh. h, 'lineheight': 20, 'left': XY. left, 'top': XY. top });
Document. Body. appendchild (Label );
Label. onclick = Function (){
This . Style. Display = "NONE ";
Input. Focus ();
}
Input. onfocus = Function (){
Label. style. Display = "NONE ";
};
Input. onblur = Function (){
If ( This . Value = ""){
Label. style. Display = "Block ";
}
};
}
}
VaR Inpcoll = Document. getelementsbytagname ('input '),
Textcoll = Document. getelementsbytagname ('textarea ');
// Convert an HTML set to an array
Function Toarray (Coll ){
For ( VaR I = 0, A = [], Len = Coll. length; I <Len; I ++ ){
A [I] = Coll [I];
}
Return A;
}
VaR Inparr = toarray (inpcoll ),
Textarr = toarray (textcoll ),
Placeholderarr = inparr. Concat (textarr );
For ( VaR I = 0; I <placeholderarr. length; I ++ ){
If (Placeholderarr [I]. getattribute ('placeholder ')){
New Placeholder (placeholderarr [I]);
}
}
}
})()
HTML code:
< Div >
< Input Type = "Text" Placeholder = "Tip 1" /> < BR >
< Textarea Placeholder = "Tip 2" /> </ Textarea > < BR >
< Input Type = "Text" Placeholder = "Tip 3" /> < BR >
</ Div >
CSS code:
Div, input, textarea { Margin : 0 ; Padding : 0 ;}
Div { Width :400px ; Margin : 100px auto 0 ;}
Input, textarea { Width : 200px ; Height : 20px ; Margin-top : 5px ; Line-height : 20px ; Border :1px #666666 solid ; Background-color : # Fff ; Padding-left : 2px ;}
Textarea { Height : 60px ; Font-size : 12px ; Resize : None ;}
Use: Introduce JS at the bottom of the page and directly use the placeholder attribute.