关于IE支持placeholder属性解决方案

在html5中，文本框，也就是input， type为text，或者password，新增了一个属性placeholder，也就是占位符，当输入的时候，占位符就会消失。

这个属性非常好用，因为有这个必要html5才会有这个属性，然而在IE下，就没有这效果，那么我们来实现IE9的兼容效果

我写了一个jQuery的插件，让IE浏览器实现这效果
代码如下

jQuery.fn.placeholder = function(){	var i = document.createElement(‘input‘),		placeholdersupport = ‘placeholder‘ in i;	if(!placeholdersupport){		var inputs = jQuery(this);		inputs.each(function(){			var input = jQuery(this),				text = input.attr(‘placeholder‘),				pdl = 0,				height = input.outerHeight(),				width = input.outerWidth(),				placeholder = jQuery(‘<span class="phTips">‘+text+‘</span>‘);			try{				pdl = input.css(‘padding-left‘).match(/\d*/i)[0] * 1;			}catch(e){				pdl = 5;			}			placeholder.css({‘margin-left‘: -(width-pdl),‘height‘:height,‘line-height‘:height+"px",‘position‘:‘absolute‘, ‘color‘: "#6C7C88", ‘font-size‘ : "12px"});			placeholder.click(function(){				input.focus();			});			if(input.val() != ""){				placeholder.css({display:‘none‘});			}else{				placeholder.css({display:‘inline‘});			}			placeholder.insertAfter(input);			input.keyup(function(e){				if(jQuery(this).val() != ""){					placeholder.css({display:‘none‘});				}else{					placeholder.css({display:‘inline‘});				}			});		});	}	return this;};

代码不复杂简单易懂~直接写入JS文件引用便可调用，不与firefox,google的属性冲突

引入jQuery库，然后引入这个插件，调用如下：

$(function (){

jQuery(‘input[placeholder]‘).placeholder();

}

);

样式也可以自由修改如下：

placeholder.css({

‘margin-left‘: -(width-pdl),

‘height‘:height,

‘line-height‘:height+"px",

‘position‘:‘absolute‘,

‘color‘: "#cecfc9",

‘font-size‘ : "12px"});

如果存在什么bug请大家回复以便及时修正~

 

来自为知笔记(Wiz)