Placeholder的表现与兼容性
程序员文章站
2022-07-13 10:11:09
...
(1)HTML5中新增加的一个属性,应用于input,textarea,表现为:文本框内灰色字体提示;聚焦后,提示隐藏
(2)兼容性:能支持HTML5的浏览器:IE10,Firefox,Chrome,Safari等,低版本不支持(IE5-IE9)
(a)兼容所有浏览器(IE6-IE9)
function placeHolder(){
if(nodes.length && !("placeholder" in document_createElement_x("input"))){
for(i=0;i<nodes.length;i++){
var self = nodes[i],
placeholder = self.getAttribute('placeholder') || '';
self.onfocus = function(){
if(self.value == placeholder){
self.value = '';
self.style.color = "";
}
}
self.onblur = function(){
if(self.value == ''){
self.value = placeholder;
self.style.color = pcolor;
}
}
self.value = placeholder;
self.style.color = pcolor;
}
}
}
(b)表现一致
用label或者背景图片的聚焦隐藏来实现
(c)IE10的位置太靠下,导致页面丑:使用hack
padding-bottom:5px\0;
(3)区别:Chrome,Firefox中聚焦后提示不隐藏,输入后才隐藏内容
(4)如何修改文本框文字、提示的样式?如,文字:red 提示:pink
color:red;
//ff
::-moz-placeholer:pink;
//chrome safari
::-webkit-input-placeholder:pink;
//IE10
:-ms-input-placeholder:pink;