兼容HTML5的Placeholder属性-更新版v0.10102013

今年2月6日写了一片《HTML5的Placeholder属性》,中间提到了相应的兼容方法。关于HTML5的Placeholder属性详细介绍,可以在这个地址查看:

http://levi.yii.so/?p=2741

有朋友留言反馈,在通js兼容方法的时候,password文本框无法展示提示信息,于是今天做了一次彻底更新。

更新如下:

  1. 将方法修改为node原生对象的继承对象
  2. 兼容input类型为password的文本框
  3. 提供样式名称作为参数,可以灵活设置样式,修正样式设置一处问题
  4. 解决了事件监听兼容性问题
  5. 提供jquery插件版

备注:以下方法均在Mac下chrome测试通过,其他浏览器若有问题,请留言反馈。

先来看看js原生方法:

先来看看调用方法:

// 特定某一个文本对象
document.getElementById('tmp').PlaceHolder('abc');

// 设定所有文本对象
document.getElementsBytagName('input').PlaceHolder('abc');

js方法如下:

// 去空格
String.prototype.trim = function() {
    return this.replace(/(^s+)|(s+$)/g, '');
};

// 修正事件兼容
Node.prototype.addEvent = function(type, handler) {
    if (this.addEventListener) {
        this.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, handler);
    } else {
        element['on' + type] = handler;
    }

    return this;
};

Node.prototype.rmEvent = function(type, handler) {
    if (this.removeEventListener) {
        this.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
        element.detachEvent('on' + type, handler);
    } else {
        element['on' + type] = null;
    }

    return this;
}

// PlaceHolder v0.10102013
Node.prototype.PlaceHolder = function(className) {
    var inputs = this.length ? this : [this],
        _get = function(elem, name, redata) {
            return elem.attributes[name] ? elem.attributes[name].nodeValue : (redata == undefined ? null : redata);
        },

        _set = function(elem, opt) {
            for(i in opt) {
                if (i == 'value') {
                    elem.value = opt[i];
                }

                elem.setAttribute(i, opt[i]);
            }
        };

    if ('placeholder' in document.createElement('input')) {
        return this;
    }

    for (var i = 0, length = inputs.length; i < length; i++) {
        var input = inputs[i];
        input.init = {
            'type': _get(input, 'type', 'text'),
            'placeholder': _get(input, 'placeholder'),
            'class': _get(input, 'class', ''),
            'value': ''
        };

        input.opts = {
            'type': 'text',
            'value': input.init.placeholder,
            'class': (input.init.class + (className ? (' ' + className) : '')).trim()
        };

        if (input.attributes && input.init.placeholder && input.value != undefined) {
            if (input.value == '') {
                _set(input, input.opts);
            }

            input.addEvent('focus', function(e) {
                if (this.value == input.init.placeholder) {
                    _set(this, this.init);
                }
            }).addEvent('blur', function(e) {
                if (this.value == '') {
                    _set(this, this.opts);
                }
            });
        }
    }

    return this;
};

再来看看jQuery插件版:

先来看看调用方法:

// 特定某一个文本对象
$('#tmp').PlaceHolder('abc');

// 设定所有文本对象
$('input').PlaceHolder('abc');

// 一劳永逸调用方法
$('[placeholder]').PlaceHolder('abc');

js方法如下:

;(function($) {
    $.fn.PlaceHolder = function(className) {
        var _set = function($em, opt) {
            for (i in opt) {
                switch(i) {
                    case 'value': $em.val(opt[i]); break;
                    case 'class':
                        if (opt[i].length) {
                            $em.toggleClass(opt[i]);
                        }
                        break;
                    default: $em.attr(i, opt[i]);
                }
            }
        };
        
        if ('placeholder' in $('<input />')[0]) {
            return this;
        }
        
        return this.each(function() {
            var $this = $(this), 
                init = {
                    'type': $this.attr('type'),
                    'placeholder': $this.attr('placeholder')
                };
            
            $this.bind({
                'init': function(){
                    _set($(this), {
                        'type': init.type,
                        'class': className ? className : '',
                        'value': ''
                    });
                },
                
                'opts': function() {
                    _set($(this), {
                        'type': 'text',
                        'class': className ? className : '',
                        'value': init.placeholder
                    });
                },
                
                'focus': function() {
                    var $this = $(this);
                    if ($this.val() == init.placeholder) {
                        $this.trigger('init');
                    }
                },
                
                'blur': function() {
                    var $this = $(this);
                    if ($this.val() == '') {
                        $this.trigger('opts');
                    }
                }
            });
            
            if (init.placeholder && $this[0].value != undefined) {
                $this.trigger('blur');
            }
        });
    };
})(jQuery);

若有什么问题请留言说明

最后,有什么问题,大家可以给我留言哦,别忘了关注我的博客哦:

http://list.qq.com/cgi-bin/qf_invite?id=b6eb34388fd016582957d6e50d005146e24fe6b166ee66c0



此条目发表在Javascript分类目录,贴了, , , 标签。将固定链接加入收藏夹。
  1. Pingback: HTML5的Placeholder属性 | 乱炖

  2. Pingback: 一套标准兼容HTML5输入框提示信息的插件iHolder_v0.1.06.21.2014_预览版 | 乱炖 - 研究WEB