js小工具-使用dom元素模拟placeholder

1.简介

placeholder是input输入框的一个属性，熟悉网页开发的同学应该都知道它，它可以为文本框增加一个文字提示，并且在文本框开始输入或聚焦时自动隐藏，然而，placeholder在不同的浏览器中默认的样式和出现的时机都是不确定的。如果UI姐姐告诉你她希望这个地方就是统一的样式而你又不想拒绝的时候，那就得想办法去实现它啦。

2.代码实现

这里用一个span来显示placeholder的元素，并且当文本框聚焦或输入时检测是否需要显示placeholder，同时采用MutationObserver监听属性的变化。这个MutationObserver是HTML5新增的对象，用于取代传统的Mutation Event,可用来监听节点的插入删除和属性的变化等，有兴趣的同学可以百度一下。

var dc = {
	//给input输入框添加placeholder
	placeholder: function(input,holderStyles,styles,cstyles){
		var $input = $(input);
		$input.each(function(index,ele){
			var $self = $(ele);
			var $parent = $self.parent();
			if(!$parent.data('inputholder')){
				//判断是否存在一个类名为input-container的父元素
				if(!$parent.hasClass('input-container')){
					$self.before($('<span class="input-container"></span>'));
					//新增将容器的宽高和display属性设置为和input元素一样