zoukankan      html  css  js  c++  java
  • 标准兼容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);

  • 相关阅读:
    特殊字符,如Emoji表情Base64存储到数据库
    判断文本文件的编码
    很多.net 程序员不知道又非常重要的 .net高级调试技巧.调试别人的dll方法内的变量
    没想到你是这样的Linux
    PDF转成txt
    生成云图
    Data collection (imaging)
    Python Conda 软件包升级
    电镜作业2的脚本版本
    电镜作业2
  • 原文地址:https://www.cnblogs.com/xkzy/p/3953995.html
Copyright © 2011-2022 走看看