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('p', '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 = {
	p: document.createelement('p'),
	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 = 'p';
			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('p', '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);