Js imitates html5 placeholder to adapt to unsupported browsers

Html5 supports placeholder native. For unsupported browsers (ie), it can be simulated using js.
Js Code
Copy codeThe Code is as follows:
(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 = {
// Obtain the 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
}
},
// Retrieve the width and height
Getwh: function (obj ){
Return {
W: obj. offsetWidth,
H: obj. offsetHeight
}
},
// Add the 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 the html set to an array
Function toArray (coll ){
For (var I = 0, a = [], len = coll. length; I <len; I ++ ){
A [I] = coll [I];
}
Return;
}
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:
Copy codeThe Code is as follows:
<Div>
<Input type = "text" placeholder = "Tip 1"/> <br>
<Textarea placeholder = "Tip 2"/> </textarea> <br>
<Input type = "text" placeholder = "Tip 3"/> <br>
</Div>

Css code:
Copy codeThe Code is as follows:
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 ;}