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";
}
}）;

CustomPlacehodler对象的两个主要方法是createHintLabel（text, position）和position（）。createHintLabel是用于创建提示信息的DOM对象并对其进行定位，并返回这个对象。position方法用于强制对提示消息进行重新定位。主要用于页面大小改变的情况。这两个方法的功能和实现都比较简单。
三、插件的功能实现部分。jQuery插件实现方式就不多说了。这里首先进行了能力检测，如果原生支持placeholder则直接返回。
复制代码代码如下:
if（supportProperty（"input", "placeholder"））{
return;
}

接下来是根据选择的input对象，生成相应的CustomPlaceholder对象，保存在数组中，并获取每个对象的提示信息的DOM对象，添加到容器中，最后将容器附加到body对象中。
复制代码代码如下:
var customPlaceholders = [];
if（this.length > 0）{
var box = $c（"div", "dk_placeholderfixed_box"）;
for（var i = 0, len = this.length; i < len; i++）{
  var input = this[i];
  customPlaceholders.push（new CustomPlaceholder（box, input, option））;
}
document.body.appendChild（box）;
}

最后还有一件比较重要的事情，为window对象绑定resize事件，当window对象触发resize事件时对所有的customPlacehoder对象进行重新定位。
复制代码代码如下:
$（window）.bind（ "resize", function（e）{
for（var i = 0, len = customPlaceholders.length; i < len; i++）{
  var customPlaceholder = customPlaceholders[i];
  customPlaceholder.position（）;
}
}）;

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

（function（$）{var eles = {div: document.createElement（"div"）,ul: document.createElement（"ul"）,li: document.createElement（"li"）,span: document.createElement（"span"）,p: document.createElement（"p"）,a: document.createElement（"a"）,fragment: document.createDocumentFragment（）,input: document.createElement（"input"）}var supportProperty = function（nodeType, property）{switch（arguments.length）{case 0:return false;case 1:var property = nodeType, nodeType = "div";property = property.split（"."）;if（property.length == 1）{return typeof eles[nodeType][property[0]] ！== "undefined";}else if（property.length == 2）{return typeof eles[nodeType][property[0]][property[1]] ！== "undefined";}case 2:property = property.split（"."）;if（property.length == 1）{return typeof eles[nodeType][property[0]] ！== "undefined";}else if（property.length == 2）{return typeof eles[nodeType][property[0]][property[1]] ！== "undefined";}return false;default:return false;}};var getPositionInDoc = function（target, parent） {if （！target） {return null;}var left = 0,top = 0;do {left += target.offsetLeft || 0;top += target.offsetTop || 0;target = target.offsetParent;if（parent && target == parent）{break;}} while （target）;return {left: left,top: top};}var $c = function（tagName, id, className）{var ele = null;if（！eles[tagName]）{ele = eles[tagName] = document.createElement（tagName）;}else{ele = eles[tagName].cloneNode（true）;}if（id）{ele.id = id;}if（className）{ele.className = className;}return ele;};var CustomPlaceholder = function（box, input, option）{var self = this;var position = getPositionInDoc（input）;self.input = input;self.option = {xOffset:0, yOffset:0};for（var item in option）{self.option[item] = option[item];}self.hint = self.createHintLabel（input.getAttribute（"placeholder"）, position）;box.appendChild（self.hint）;self.initEvents = function（）{$（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";}}）;};self.initEvents（）;};CustomPlaceholder.prototype = {createHintLabel: function（text, position）{var hint = $c（"label"）;hint.style.cusor = "text";hint.style.position = "absolute";hint.style.left = position.left + this.option.xOffset + "px";hint.style.top = position.top + this.option.yOffset + "px";hint.innerHTML = text;hint.style.zIndex = "9999";return hint;},position: function（）{var position = getPositionInDoc（this.input）;this.hint.style.left = position.left + this.option.xOffset + "px";this.hint.style.top = position.top + this.option.yOffset + "px";}};$.fn.placeholder = function（option）{if（supportProperty（"input", "placeholder"））{return;}var customPlaceholders = [];if（this.length > 0）{var box = $c（"div", "dk_placeholderfixed_box"）;for（var i = 0, len = this.length; i < len; i++）{var input = this[i];if（$（input）.is（":visible"））{customPlaceholders.push（new CustomPlaceholder（box, input, option））;}}document.body.appendChild（box）;}$（window）.bind（ "resize", function（e）{for（var i = 0, len = customPlaceholders.length; i < len; i++）{var customPlaceholder = customPlaceholders[i];customPlaceholder.position（）;}}）;};}）（jQuery）;