使浏览器支持Placeholder有很多方法，都不是很完美，或多或少有点问题，且有些原生支持的浏览器在获得焦点时会清空Placeholder提示。发现知乎网的解决方法不错，特记录下。
windows系统中以下浏览器测试通过:Google Chrome 18,Firefox 12,IE 9,IE 6,Opera 11.5。在android 4.0系统也测试了下，原生浏览器及Opera Mobile12基本通过，缺陷是获得焦点时会清空Placeholder提示。
jquery.placeholder.zhihu.js：
/*
* html5 placeholder pollfill
* - 使用绝对定位内嵌层
* - 也适用于密码域
* 目标浏览器: IE 6~9, FF 3.5
// 默认
$('input[placeholder]').placeholder()
// autofocus 与 placeholder 搭配时，非 webkit 清空了提示文本，推荐
$('input[placeholder]').placeholder({
// 将删除原有 placehodler 属性，强制用 JS 实现替代
useNative: false,
// focus 时不清除提示文本， keypress 有效字符时才清空
hideOnFocus: false,
// 附加样式
style: {
textShadow: 'none'
}
})
*/
(function ($) {
var attr = 'placeholder', nativeSupported = attr in document.createElement('input') $.fn.placeholder = function (options) {
return this.each(function () {
var $input = $(this) if ( typeof options === 'string' ) {
options = { text: options }
} var opt = $.extend({
text: '',
style: {},
namespace: 'placeholder',
useNative: true,
hideOnFocus: true
}, options || {}) if ( !opt.text ) {
opt.text = $input.attr(attr)
} if (!opt.useNative) {
$input.removeAttr(attr)
}else if ( nativeSupported ) {
// 仅改变文本
$input.attr(attr, opt.text)
return
} var width= $input.width(), height = $input.height()
var box_style = ['marginTop', 'marginLeft', 'paddingTop', 'paddingLeft', 'paddingRight'] var show= function () { $layer.show() }
var hide= function () { $layer.hide() }
var is_empty= function () { return !$input.val() }
var check= function () { is_empty() ? show() : hide() } var position= function () {
var pos = $input.position()
if (!opt.hideOnFocus) {
// 按鍵隱藏的情况，需要移動光標两像素
pos.left += 2
}
$layer.css(pos)
$.each(box_style, function (i, name) {
$layer.css(name, $input.css(name))
})
} var layer_style = {
color: 'gray',
cursor: 'text',
textAlign : 'left',
position: 'absolute',
fontSize: $input.css('fontSize'),
fontFamily: $input.css('fontFamily'),
display: is_empty() ? 'block' : 'none'
} // create
var layer_props = {
text: opt.text,
width : width,
height: 'auto'
} // 确保只绑定一次
var ns = '.' + opt.namespace, $layer = $input.data('layer' + ns)
if (!$layer) {
$input.data('layer' + ns, $layer = $('', layer_props).appendTo($input.offsetParent()) )
} // activate
$layer
.css($.extend(layer_style, opt.style))
.unbind('click' + ns)
.bind('click' + ns, function () {
opt.hideOnFocus && hide()
$input.focus()
}) $input
.unbind(ns)
.bind('blur' + ns, check) if (opt.hideOnFocus) {
$input.bind('focus' + ns, hide)
}else{
$input.bind('keypress keydown' + ns, function(e) {
var key = e.keyCode
if (e.charCode || (key >= 65 && key <=90)) {
hide()
}
})
.bind('keyup' + ns,check)
} // 由于 ie 记住密码的特性，需要监听值改变
// ie9 不支持 jq bind 此事件
$input.get(0).onpropertychange = check position()
check()
})
} })(jQuery) Demo:
HTML5 placeholder jQuery Plugin - 锐客网
HTML5 Placeholder jQuery Plugin
【解决HTML5 Placeholder兼容性的方案】转载自： http://xyly624.blog.51cto.com/842520/864959
