jQuery插件实现-自定义Placeholder

HTML5中文本框的新属性placeholder是个非常好用的属性,但是IE系列直至IE9都不支持这一属性,这就让大家在用这一属性的时候有些犹豫不决。自己曾经写过很多类似共的小控件,但是都不是很通用,这里分享一个渐进增强的自定义placeholder的jQuery插件。有点是使用简单,大家也可以根据自己的需要进行改进。平常写jQuery插件比较少,考虑到用jQuery的同学比较多,这里就用jQuery插件的形式编写了。

在这里简单的介绍一下实现思路。

    o

  1. 表现与html5原生的placeholder尽量类似
  2. o

  3. 渐进增强对于支持placeholder的浏览器不做处理

1.首先是几个工具方法:

    o

  • supportProperty(nodeType, property),获取浏览器是否支持某一控件的某一属性
  • o

  • getPositionInDoc(target, parent),获取对象在文档中的位置
  • o

  • $c,一个快速创建Dom对象的方法

这几个工具方法都是一些比较常见通用的方法,如果你有自己的或者更合适的可以自行替换。

2.主体,CustomPlaceholder对象。这个对象主要是维护每一个文本框的信息,包括其位置,应该显示的提示信息等等,另外它还包含创建提示信息以及定位等方法以及对象的相应事件。

事件主要是在initEvents函数中进行的处理,这里特别要注意的是对提示信息事件的处理,当提示信息被点击时焦点应该被重新定位到文本框。而文本框要处理的则是focusblur事件。

$(self.hint).bind( 'click', function(e){
oself.input.focus();
});

$(self.input).bind( 'focus', function(e){
oself.hint.style.display = 'none';
});

$(self.input).bind( 'blur', function(e){
oif(this.value == ''){
oself.hint.style.display = 'inline';
o}
});

CustomPlacehodler对象的两个主要方法是createHintLabel(text, position)position()createHintLabel是用于创建提示信息的DOM对象并对其进行定位,并返回这个对象。position方法用于强制对提示消息进行重新定位。主要用于页面大小改变的情况。这两个方法的功能和实现都比较简单。

3.插件的功能实现部分。jQuery插件实现方式就不多说了。这里首先进行了能力检测,如果原生支持placeholder则直接返回。

if(supportProperty('input', 'placeholder')){
oreturn;
}

接下来是根据选择的input对象,生成相应的CustomPlaceholder对象,保存在数组中,并获取每个对象的提示信息的DOM对象,添加到容器中,最后将容器附加到body对象中。

var customPlaceholders = [];
if(this.length > 0){
ovar box = $c('div', 'dk_placeholderfixed_box');
ofor(var i = 0, len = this.length; i < len; i++){
ovar input = this[i];
ocustomPlaceholders.push(new CustomPlaceholder(box, input, option));
o}

odocument.body.appendChild(box);
}

最后还有一件比较重要的事情,为window对象绑定resize事件,当window对象触发resize事件时对所有的customPlacehoder对象进行重新定位。

$(window).bind( 'resize', function(e){
ofor(var i = 0, len = customPlaceholders.length; i < len; i++){
ovar customPlaceholder = customPlaceholders[i];
ocustomPlaceholder.position();
o}

});

这个简单的小插件到这里就写完了。

点击这里查看源码

抛砖引玉,欢迎不吝赐教。

转载请注明原文出处《jQuery插件实现-自定义Placeholder》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。