HTML5 native support placeholder, for unsupported browsers (IE), can be implemented with JS simulation.
JS Code
Copy Code code as follows:
(function () {
Determine whether to support placeholder
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 (' placeholder ');
This.label.style.cssText = ' Position:absolute; Text-indent:4px;color: #999999; font-size:12px; ';
if (Obj.value!= ') {
This.label.style.display = ' None ';
}
This.init ();
}
Placeholder.prototype = {
Take position
Getxy:function (obj) {
var left, top;
if (document.documentElement.getBoundingClientRect) {
var html = document.documentelement,
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
}
},
Take the width and height
Getwh:function (obj) {
return {
W:obj.offsetwidth,
H:obj.offsetheight
}
},
Add a width-high value 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 ':, ' 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 ');
HTML collection conversions to arrays
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:
Copy Code code as follows:
<div>
<input type= "text" placeholder= "Hint 1"/><br>
<textarea placeholder= "Hint 2"/></textarea><br>
<input type= "text" placeholder= "Hint 3"/><br>
</div>
CSS Code:
Copy Code code 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;}