Jquery——实现IE6 7 8 兼容placeholder属性

本文链接：https://blog.csdn.net/a1974117511/article/details/48680591

本文探讨了如何通过改进输入法的用户体验，特别是在输入框中使用占位符时的优化策略，包括自动去除和恢复占位符的功能实现，以及不同修复方法的优缺点对比。详细介绍了JavaScript代码实现细节，包括初始化检查、修复方法一和修复方法二，并提供了CSS样式应用，确保输入框在用户交互过程中的表现更加流畅和友好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var JPlaceHolder = { 
    //检测    
	_check : function(){ 
        return 'placeholder' in document.createElement('input'); 
    }, 
    //初始化     
    init : function(){ 
        if(!this._check()){ 
            this.fix(); 
        } 
    }, 
    //修复，该方法简单，但是有一个弊端：不填写的时候输入框也有值，需要在提交表单的时候过滤掉默认值     
    fix : function(){ 
    	$('[placeholder]').focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('my-placeholder');
            }
        }).blur(function() {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('my-placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();
    },
    //修复2，该方法不会出现上述弊端，但是如果输入框初始是隐藏的话，定位left 和 top可能会出现为0的情况。这时，可以默认显示输入框，再用js在页面加载完成后隐藏就可以了
    fix : function(){
    	jQuery(':input[placeholder]').each(function(index, element) { 
            var self = $(this), txt = self.attr('placeholder'); 
            var pos = self.position(), h = self.height(), paddingleft = self.css('padding-left'), paddingtop = self.css('padding-top'); 
            var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, paddingLeft:paddingleft,paddingTop:paddingtop, color:'#aaa'}).appendTo(self.parent()); 
            self.focus(function(e) { 
                holder.hide(); 
            }).blur(function(e) { 
                if(self.val()){ 
                	holder.hide();
                }else{
                	holder.show(); 
                }
            }).blur(); 
            holder.click(function(e) { 
                holder.hide(); 
                self.focus(); 
            }); 
        }); 
    }
};
//调用
$(function(){
	JPlaceHolder.init();
});
//css
.my-placeholder{color:#c6c6c6; }