Backward compatibility of the placeholder properties of HTML5

Backward compatibility of the placeholder properties of HTML5more 0

The placeholder property is a newly added property of HTML5, and when input or textarea is set, the content of the value is displayed as a gray hint in the text box, and when the text box has the focus, the prompt text disappears, and placeholder can be used as the prompt copy of the input box. Login Box:

System Login

In fact, this was done by setting value value for Input|textarea, which is set to NULL when Input|textarea gets the focus. But there is one problem with the Password entry box:

<input type= "Password" >

If you reuse a method that sets the value, the value in the Password input box is replaced by a black point. Use placeholder can solve this problem, currently support placeholder browser is: firefox4.0+, chrome4.0+, Safari4.0+,opera 11, IE9. For unsupported browsers We will use an alternative method of simulating the placeholder property:

The specific ideas are:

1, first determine whether the browser supports the placeholder property, and if not supported, use the impersonation placeholder

Determine if the placeholder property is supported

function Isplaceholer () {

var input = document.createelement (' input ');

Return "placeholder" in input;

}

2, we create a label label:<label> password </label> tag content for the text to be added, the copy should be from the corresponding Input|textarea tag to obtain its placeholder attribute value, The label label is then obscured to the corresponding input|textarea.

Label

label overlay to the corresponding input

For example, IE8 does not support the placeholder property, add a placeholder for three input, add a label on the body, respectively, corresponding to the "mailbox", "Password", "Please enter the verification code" three input boxes. Set the three labels to the position of the input entry box, respectively.

3, add the event, the label display is set to none when the label is clicked or the Input|textarea gets the focus;

It is displayed when the Input|textarea gets the focus.

The specific implementation code is as follows:

if (!isplaceholer ()) {//If the placeholder property is not supported

Create a class

function Placeholder (obj) {

This.input = obj; obj is a input|textarea with the placeholder attribute added

This.label = document.createelement (' label '); Create a label label

The label label's innerHTML is set to Input|textarea's Placeholder property value.

This.label.innerHTML = Obj.getattribute (' placeholder ');

This.label.style.cssText = ' Position:absolute; Text-indent:4px;color: #999999; font-size:14px; ';

if (obj.value! = ") {

This.label.style.display = ' None ';

};

This.init ();

}

Placeholder.prototype = {

Gets the location of the Input|textarea so that the corresponding label is positioned

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 of the Input|textarea and set the label to the same width and height

Getwh:function (obj) {

return {

W:obj.offsetwidth,

H:obj.offsetheight

}

},

Add a wide Height 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,

Getxy = This.getxy,

XY = THIS.GETXY (input),

WH = This.getwh (input);

This.setstyles (label, {' Width ': wh.w, ' height ': wh.h, ' lineheight ': +, ' Left ': xy.left+8, ' 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";

}

};

if (window.attachevent) {

Window.attachevent ("OnResize", function () {//) because the label tag is added to the body, the body is absolutely positioned, so when the page

var xy = getxy (input);

Placeholder.prototype.setStyles (label, {' Left ': xy.left+8, ' top ': xy.top});

})}else{

Window.addeventlistener ("Resize", function () {

var xy = getxy (input);

Placeholder.prototype.setStyles (label, {' Left ': xy.left+8, ' top ': xy.top});

},false);

}

}

}

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++) {//the label for which the alternate placeholder is added, respectively

if (Placeholderarr[i].getattribute (' placeholder ')) {

New Placeholder (Placeholderarr[i]);

}

}

}

—————————————————————————————————————————

Ps:

For Chrome, if the placeholder attribute is supported, placeholder's content does not disappear when the Input|textarea gets focus, only disappears when there is content input, and is previously proposed to be consistent with the browser experience. Even though the Chrome browser supports the placeholder attribute, the substitution method is used to achieve the effect that Input|textarea gets the focus, suggesting that the copy disappears immediately, and that the individual does not need to superfluous because the user does not frequently use multiple browsers at the same time.

This article is from: Http://mdc.sohu.com, the original address: http://mdc.sohu.com/?p=1583, thank the original author to share.

Backward compatibility of the placeholder properties of HTML5