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>
文章评论