处理不支持input的placeholder兼容性脚本

我本人的思路是用脚本在原有的input上方添加一个div对象，把input的placehoder信息放入div中，在通过使用position属性把div的文本信息放到原有input对象上方（给人的感觉文本在input里面），当用户点击div时，隐藏div，并使相应的input获得焦点；当input失去焦点，并且value为空时，再显示相应的div对象。具体代码如下：

window.setTimeout(function(){
    var _input = document.createElement("input");

    if(_input.placeholder===undefined){ // 判断input对象placeholder是否被支持，只有在不支持placeholder时才会执行下面的代码

	//方便讲input的div关联的变量
	var i = 1;
	
	//使用juqery遍历所有的包含placeholder的对象，并逐个处理
    $("input[placeholder]").each(function(i){

		//self 指向当前input对象的
        var self  = this;
		//icss 保存当前input的最终样式，以便对脚本创建的div进行样式设置，使其最大限度的和input样式完全一致
        var icss = self.currentStyle;

		//随便命名一个字符串（为方便，使用前面定义的 i++ 做后缀，）
        var holderId = "hhh_"+(i++);

		//input对象的 placeholder 属性值
        var placeholder = $(self).attr("placeholder");
        var d = document.createElement("div"); //外层负责定位的div

        var dc =document.createElement("div"); //内层负责承载 placeholder 文本信息
        dc.innerHTML = placeholder;
        d.appendChild(dc);
		//当div被点击时，使当前input获得焦点，（个人想法，随时可改）当前div的隐藏在input获取焦点时触发
        d.onclick = function(){self.focus();}
        self.parentNode.insertBefore(d,self);


		/*设置新建div的id hoderId，并把hoderId值保存在当前input的附加属性_holderId中，
		这样可以根据任意一个 input _holderId属性知道和对应的提示信息，即_holderId属性的值是相应div的id
		*/
        d.id = holderId;
        self._holderId = holderId;

		//使用定位设置外层div的样式，根据需要可以随时自行修改
       $.extend(d.style,{"position":"relative","height":"1px","border":"none"});
		//设置内层div样式，为尽量保持样式和input一致，把 input 最终样式加给它，并根据需要设置额外（或覆盖input）的样式
       $.extend(dc.style,icss,{position:"absolute",color:"#666666",border:"none",background:"none"});

    });
	//为每个有placeholder属性的input创建div 完成

	//下面就简单了，为input 添加 focus 和 blur 事件来处理placeholder的div对象显示
	$("input[placeholder]").bind("focus",function(){
				//当input获得焦点是，隐藏div
				$("#"+this._holderId).hide();
		});
	$("input[placeholder]").bind("blur",function(){
			//当input失去焦点，并且value为“”时，根据input的附加属性 _holderId 显示div
			if(this.value==""){
                $("#"+this._holderId).show();
			}
		});

    }
},300);

在此之前有很多人用js改变input的alue属性为placeholer的值，虽然能解决一些问题，但也带了一些麻烦：提交表单时，如果要对input输入验证的话，就得首先和placeholder对比判断是不是用户输入的值，这对原有的内容侵入性（主要是提交时验证value是用户输入还是placeholder的默认值）比较大，而且input 的type=“password”时就没法用了。我也是在尝试过这些方法失败之后才自己动手这些脚本，很庆幸我找到的这种方式对原有的input没有任何侵害，也不用做任何修改（当然唯一的问题就是某些新建div定位可能会有点麻烦），如果哪天不需要了，直接把脚本删掉也不需要逐个修改页面。