IE低版本下实现html5的placeholder(表单提示)功能

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。

demo例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>placeHolder</title>
</head>
<input type="text" id="fileElem" placeholder = "sssss" >
<input type="text" id="fileElem1" placeholder = "XXXXXXXXXXXXXXXXXX" >
<input type="text" id="fileElem" placeholder = "11111" >
<input type="text" id="fileElem" placeholder = "sss2222ss" >
<input type="text" id="fileElem" placeholder = "33333" >
<input type="text" id="fileElem" placeholder = "444444" >
<input type="text" id="fileElem" placeholder = "666666" >
<textarea placeholder="7777777777777777777">
</textarea>
<script>
var placeHolder = {
box:function(){
var obj = [];
var text = document.getElementsByTagName('input');
var textarea = document.getElementsByTagName('textarea');
for(var i=0;i < text.length;i++){
if(!!text[i].getAttribute('placeholder')){
obj.push(text[i]);
}else{
continue;
}
}
for(var j=0;j < textarea.length;j++){
if(!!textarea[j].getAttribute('placeholder')!=''){
obj.push(textarea[j]);
}else{
continue;
}
}
return obj;
},
IsSpport:function(){
var input = document.createElement('input');
return "placeholder" in input;
},
init:function(){
if(!this.IsSpport()){
var obj = this.box();
for(var i = 0;i < obj.length;i++){
obj[i].value = obj[i].getAttribute('placeholder');
obj[i].onfocus = function(e){
if(this.value == this.getAttribute('placeholder')){
this.value = '';
}
}
obj[i].onblur = function(){
if(this.value == ''){
this.value = this.getAttribute('placeholder');
}
}
}
}
}
}.init();
</script>

直接执行上诉js代码即可!谷歌,等高版本浏览器没效果!在IE低版本下测试!

上一篇:linux查看日志文件内容命令(面试被常问到的问题)


下一篇:ES6新特新之箭头函数使用细节