HTML5中input的placeholder颜色设置及兼容性解决方案

1、placeholder是什么？

placeholder是html5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点（或输入内容）时，提示文字消失。

例如下文本框文字效果

2、placeholder的浏览器兼容性和在不同浏览器下的表现

由于placeholder是个新增属性，目前只有少数浏览器支持，如何让更多的浏览器支持它呢？

目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持

默认情况下，placeholder的文字是灰色，输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么，如何修改placeholder的色值呢？

如果直接写input{color:#ddd;}，可以看到，ie10和ff下，placeholder文字和输入文字都变成了相同颜色#ddd，

默认颜色调整css解决方案：

/* all */
::-webkit-input-placeholder { color:#f00; }
input:-moz-placeholder { color:#f00; }

到这里还不能完全解决placeholder的多浏览器支持，还需要配合使用js处理
placeholder的浏览器兼容js解决方案：

var JPlaceHolder = {
//检测
_check : function(){
return 'placeholder' in document.createElement('input');
},
//初始化
init : function(){
if(!this._check()){
this.fix();
}
},
//修复
fix : function(){
jQuery(':input[placeholder]').each(function(index, element) {
var self = $(this), txt = self.attr('placeholder');
self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
self.focusin(function(e) {
holder.hide();
}).focusout(function(e) {
if(!self.val()){
holder.show();
}
});
holder.click(function(e) {
holder.hide();
self.focus();
});
});
}
};
//执行
jQuery(function(){
JPlaceHolder.init();
});

页面中placeholder使用示例：

<dl>
<dt><span class="red">*</span>用户名：</dt>
<dd><input id="username" name="username" type="text" data-msg-required="用户名不能为空" maxlength="20" placeholder="请输入用户名(必填)" class="inputBg inputone4"></dd>
</dl>

本文固定链接: http://www.webzsky.com/?p=494 | 蓝戒的博客