jQuery实现的一个自定义Placeholder属性插件
HTML5中文本框的新属性placeholder是个非常好用的属性,但是IE系列直至IE9都不支持这一属性,这就让大家在用这一属性的时候有些犹豫不决。自己曾经写过很多类似共的小控件,但是都不是很通用,这里分享一个渐进增强的自定义placeholder的jQuery插件。有点是使用简单,大家也可以根据自己的需要进行改进。平常写jQuery插件比较少,考虑到用jQuery的同学比较多,这里就用jQuery插件的形式编写了。
在这里简单的介绍一下实现思路。
1.表现与html5原生的placeholder尽量类似
2.渐进增强对于支持placeholder的浏览器不做处理
一、首先是几个工具方法:
1.supportProperty(nodeType,property),获取浏览器是否支持某一控件的某一属性
2.getPositionInDoc(target,parent),获取对象在文档中的位置
3.$c,一个快速创建Dom对象的方法
这几个工具方法都是一些比较常见通用的方法,如果你有自己的或者更合适的可以自行替换。
二、主体,CustomPlaceholder对象。这个对象主要是维护每一个文本框的信息,包括其位置,应该显示的提示信息等等,另外它还包含创建提示信息以及定位等方法以及对象的相应事件。
事件主要是在initEvents函数中进行的处理,这里特别要注意的是对提示信息事件的处理,当提示信息被点击时焦点应该被重新定位到文本框。而文本框要处理的则是focus和blur事件。
$(self.hint).bind('click',function(e){ self.input.focus(); });
$(self.input).bind('focus',function(e){ self.hint.style.display='none'; });
$(self.input).bind('blur',function(e){ if(this.value==''){ self.hint.style.display='inline'; } });