关于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)

转载于:https://www.cnblogs.com/JesseLu/p/4019294.html