让IE支持placeholder属性

来源：互联网发布：部落冲突12本建筑数据编辑：程序博客网时间：2024/05/16 07:02

html 5 有个很棒的属性，placeholder，在鼠标聚焦到input输入框上面时候，提示文字会消失，失去焦点之后，又会出现：

但是在不支持html5的低版本的浏览器中，placeholder属性是无效的，为了解决这个问题，因此，人为的去实现placeholder属性：
/*
 * jQuery placeholder, fix for IE6,7,8,9
 * @author JENA
 * @since 20131115.1504
 * @website ishere.cn
 */
var JPlaceHolder = {
    //检测
    _check :function(){
        return'placeholder' in document.createElement('input');
    },
    //初始化
    init :function(){
        if(!this._check()){
            this.fix();
        }
    },
    //修复
    fix :function(){
        jQuery(':input[placeholder]').each(function(index, element) {
            varself = $(this), txt = self.attr('placeholder');
            self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
            varpos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
            varholder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
            self.focusin(function(e) {
                holder.hide();
            }).focusout(function(e) {
                if(!self.val()){
                    holder.show();
                }
            });
            holder.click(function(e) {
                holder.hide();
                self.focus();
            });
        });
    }
};
//执行
jQuery(function(){
    JPlaceHolder.init();   
});

将上述JS引入页面中，inuput即可显示提示信息（兼容IE10以下）

0 0