[干货]兼容HTML5的Placeholder属性

HTML5对Web Form做了许多增强，比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。

这里提供了Placeholder的兼容方法，更新如下：

1.将方法修改为node原生对象的继承对象
2.兼容input类型为password的文本框
3.提供样式名称作为参数，可以灵活设置样式，修正样式设置一处问题
4.解决了事件监听兼容性问题
5.提供jquery插件版

这里提供jquery的片段，详细说明、在线演示见：
http://levi.cg.am/?p=3171
1. [代码]先来看看调用方法：
// 特定某一个文本对象
$('#tmp').PlaceHolder('abc');

// 设定所有文本对象
$('input').PlaceHolder('abc');

// 一劳永逸调用方法
$('[placeholder]').PlaceHolder('abc');
2. [代码]js方法如下：
;(function($) {
$.fn.PlaceHolder = function(className) {
var _set = function($em, opt) {
for (i in opt) {
switch(i) {
case 'value': $em.val(opt[i]); break;
case 'class':
if (opt[i].length) {
$em.toggleClass(opt[i]);
}
break;
default: $em.attr(i, opt[i]);
}
}
};

if ('placeholder' in $('<input />')[0]) {
return this;
}

return this.each(function() {
var $this = $(this),
init = {
'type': $this.attr('type'),
'placeholder': $this.attr('placeholder')
};http://www.huiyi8.com/huawen/

$this.bind({花纹
'init': function(){
_set($(this), {
'type': init.type,
'class': className ? className : '',
'value': ''
});
},

'opts': function() {
_set($(this), {
'type': 'text',
'class': className ? className : '',
'value': init.placeholder
});
},

'focus': function() {
var $this = $(this);
if ($this.val() == init.placeholder) {
$this.trigger('init');
}
},

'blur': function() {
var $this = $(this);
if ($this.val() == '') {
$this.trigger('opts');
}
}
});

if (init.placeholder && $this[0].value != undefined) {
$this.trigger('blur');
}
});
};
})(jQuery);

巴特西

[干货]兼容HTML5的Placeholder属性－更新版v0.10102013

最新文章

热门文章