首页 > 代码库 > 关于IE支持placeholder属性解决方案

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

2024-07-26 15:46:45   219人阅读

在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)


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


联系
我们