[干货]兼容HTML5的Placeholder属性－更新版v0.10102013

标签：http   io   ar   for   问题   cti   代码   html   sp   

HTML5对Web Form做了许多增强，比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。

这里提供了Placeholder的兼容方法，更新如下：

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

这里提供jquery的片段，详细说明、在线演示见：
http://levi.cg.am/?p=3171
?1. [代码]先来看看调用方法：     
// 特定某一个文本对象
$(‘#tmp‘).PlaceHolder(‘abc‘);
  
// 设定所有文本对象
$(‘input‘).PlaceHolder(‘abc‘);
  
// 一劳永逸调用方法
$(‘[placeholder]‘).PlaceHolder(‘abc‘);
2. [代码]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‘)
                };http://www.huiyi8.com/huawen/?
              
            $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);
?

[干货]兼容HTML5的Placeholder属性－更新版v0.10102013

标签：http   io   ar   for   问题   cti   代码   html   sp   

原文地址：http://www.cnblogs.com/xkzy/p/3949357.html