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

最新推荐文章于 2025-08-08 17:07:36 发布

weixin_30565199

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xkzy/p/3953995.html

本文介绍了一个用于让Internet Explorer 6-9浏览器兼容HTML5 placeholder属性的JavaScript插件。该插件实现了与Chrome和Firefox类似的效果，即在输入框中显示提示信息，并在用户开始输入时隐藏提示信息，当输入内容被清空时再次显示提示信息。提供了插件的预览版本及其代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于版面限制，简单说下，详细的内容及在线预览、预览版压缩包，见这里
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);

转载于:https://www.cnblogs.com/xkzy/p/3953995.html