1. html页面:
<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>
2. 引入jquery.js
<script src="jquery-1.8.3.min.js"></script>
3. 接下来是页面中写入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();
});
4. 页面展示前后对比