Jquery实现IE6 7 8 兼容placeholder属性

来源:互联网 发布:linux ntp时间对时 编辑:程序博客网 时间:2024/05/20 16:37
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; }
0 0
原创粉丝点击