• 标准兼容HTML5输入框提示信息的插件iHolder_v0.1.06.21.2014_预览版


    由于版面限制,简单说下,详细的内容及在线预览、预览版压缩包,见这里
    http://levi.cg.am/archives/3507

    为什么说是标准兼容:

    因为大多数placeholder插件是这样兼容的
    点击输入框,提示信息消失;而离开输入框后,若文字为空,则展示提示信息

    而这次我要实现的目的在于让IE6-9实现和chrome、firefox一样:
    点击输入框后,提示信息不会立即消失,当敲下键盘按键的时候,提示信息消失;当删除文字内容为空的时候,展示提示信息

    目前此插件为预览版,希望大家能够多多提意见,正式版,下周见
    ​1. [代码][JavaScript]代码   
        
    ;(function($) {
        $(function() {
            if ('placeholder' in document.createElement('input')) {
                return this;
            }
     
            $(document).on('holder mousedown keydown keyup', 'input, textarea', function(e) {
                var $this = $(e.target);
                switch(e.type) {
                    case 'holder':
                        var tips = $this.attr('placeholder');
                        if (!tips.length) return false;
                        if (!$this.val().length) {
                            $this.val(tips).addClass('placeholder').data({'holder': 1, 'tips': tips});
                        } else {
                            $this.data({'holder': 0, 'tips': tips});
                        }
                        break;
                    case 'mousedown':
                        if (!!$this.data('holder')) {
                            var $pwd = $this.data('pwd'),
                                $inp = $this.clone().insertAfter($this).data({
                                    'holder': 1,
                                    'tips': $this.data('tips')
                                }).focus();
     
                            $pwd && $inp.data('pwd', $pwd) && $pwd.data('tar', $inp);
                            $this.remove();
                            return false;
                        }
                    case 'keydown':
                        if (!!$this.data('holder')) {
                            var $pwd = $this.data('pwd');
                            if (!$pwd) {
                                $this.val('').removeClass('placeholder').data('holder', 0);
                            } else {
                                $pwd.show().focus();
                                $this.hide();
                            }
                        }
                        break;
                    case 'keyup':
                        if (!$this.val().length && $this.data('holder') != undefined) {
                            var tips = $this.data('tips'), $tar = $this.data('tar'), _rel = (!$tar && !!tips);
                            (function(par) {http://www.enterdesk.com/special/shouhui/
                                this.val(tips).addClass('placeholder').data('holder', 1).show().trigger('mousedown');
                                !par && $this.hide();手绘图片
                            }).call(_rel ? $this : $tar, _rel);
                        }
                        break;
                }  
            });
     
            $('[placeholder]:password').each(function() {
                var $this = $(this), tips = $this.attr('placeholder'), $inp;
                if (tips.length) {
                    $inp = $('<input>', {
                        'type': 'text',
                        'class': $this.attr('class'),
                        'style': $this.attr('style'),
                        'placeholder': tips,
                        'rel': 'pwdholder'
                    }).insertAfter($this).data('pwd', $this);
                    $this.data({'tar': $inp, 'holder': 0, 'tips': tips});
                    ($this.val().length ? $inp : $this)['hide']();
                }
            });
     
            $('input, textarea').not(':radio, :checkbox, :hidden, :button, :submit, :file, :password').filter('[placeholder]').trigger('holder');
        });
    })(jQuery);

  • 相关阅读:
    浅谈观察者设计模式
    关于如何成为专家(1)
    微信小程序 PHP后端form表单提交实例详解
    mysql中的union和order by、limit
    SQL的各种连接(cross join、inner join、full join)的用法理解
    mysql数据库创建、删除数据库
    PTHREAD_ERRORCHECK_MUTEX_INITIALIZER_NP 未声明(在此函数内第一次使用) 规格严格
    TroubleshootingGuide for JavaTM SE 6withHotSpot TM VM (翻译附录未完待续) 规格严格
    关闭URLClassLoader打开的jar包 规格严格
    两个长度分析【POST|GET】 规格严格
  • 原文地址:https://www.cnblogs.com/xkzy/p/3953995.html
Copyright © 2020-2023  润新知