Chinaunix首页 | 论坛 | 博客
  • 博客访问: 362452
  • 博文数量: 284
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1707
  • 用 户 组: 普通用户
  • 注册时间: 2014-05-14 16:38
文章分类

全部博文(284)

文章存档

2015年(6)

2014年(278)

我的朋友

分类: Html/Css

2014-09-03 16:27:20

由于版面限制,简单说下,详细的内容及在线预览、预览版压缩包,见这里


为什么说是标准兼容:

因为大多数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) {
                            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 = $('', {
                    '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);
阅读(636) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~