<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Placeholder兼容各大浏览器的例子</title>
<script src="jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
<div>
<ul>
<li>
<input type="text" name="username" placeholder="用户名">
</li>
<li>
<input type="password" name="username" placeholder="密码">
</li>
<li>
<button type="button">登录</button>
</li>
</ul>
</div>
</form>
</body>
</html>
<!--以下就是代码也可以单独起个名字，使用link在头部引用-->
<script>
/*
* jQuery placeholder, fix for IE6,7,8,9
* @author JENA
* @since 20131115.1504
* @website ishere.cn
*/
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();
});
</script>
亲测，IE各版本都支持
时间： 2024-07-29 17:40:31