zoukankan      html  css  js  c++  java
  • [干货]兼容HTML5的Placeholder属性-更新版v0.10102013

    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);

  • 相关阅读:
    Uva673 Parentheses Balance
    cordforce Educational Codeforces Round 47 补题笔记 <未完>
    cordforce 495 补题 <未完>
    linux 基本命令笔记
    app审核相关
    CATransform3D
    UITableView点击切换状态分析
    iOS大转盘抽奖
    被忽视的控件UIToolbar
    AVPlayerViewController视频播放器
  • 原文地址:https://www.cnblogs.com/xkzy/p/3949357.html
Copyright © 2011-2022 走看看