Plug-in to support Html5 placeholder attribute under IE_html5 tutorial skills

HTML5 has made many enhancements to Web Form, such as the new input type type, Form Validation, etc.

Placeholder is another new attribute added in HTML5. When this attribute is set in input or textarea, the content of the value will be displayed in the text box as a gray text prompt. When the text box gains focus, the prompt text disappear. In the past, this effect could only be achieved by using JavaScript. Firefox, Google Chrome, etc. expressed support for it, but IE was the only one that felt inconsistent!

For example:

Introducing a powerful attribute plug-in that allows IE to support placeholder. It is also compatible with other browsers that do not support placeholder. The code is as follows:

Copy code

The code is as follows:

$(document).ready(function(){
var doc=document,
inputs=doc.getElementsByTagName('input'),
supportPlaceholder='placeholder'in doc.createElement('input'),
placeholder=function(input){
var text=input.getAttribute('placeholder'),
defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text
}
input.onfocus=function(){
if(input.value===text)
{
this.value=''
}
};
input.onblur =function(){
if(input.value====''){
this.value=text
}
}
};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;ivar input=inputs[i],
text=input.getAttribute('placeholder');
if(input.type==='text'&&text){
placeholder(input)
}
}
}
});

Direct Copy the code and save it as a js file for reference. No need to do any processing, super convenient!

ex: This will indeed make IE's Input display the placeholder attribute, but if there is only one input on the page Fortunately, if there are multiple inputs, if the input does not fill in any value, then its empty input will automatically fill in the value of the placeholder, causing an error. For example:

Copy code

The code is as follows:

The solution is to make your own judgment in the background. Maybe it can be solved in the above js file, and we will study it later~!