`
yangshen998
  • 浏览: 1275992 次
文章分类
社区版块
存档分类
最新评论

发布一个jquery插件--在Web下输入密码时提示大写锁定键(2012-01-21 16:21最后修改)

 
阅读更多

//=============== 大写锁定键打开提示 ============================================//
/*
使用:$("#txtPWD").capsLockTip();
*/
(function ($) {
    $.fn.extend({
        capsLockTip: function (divTipID) {
            return this.each(function () {
                //创建对象实例并保存。
                //获取实例对象:var api = $("#txtPWD").data("txtPWD");
                var ins = new $.CapsLockTip($(this));
                $(this).data(this.id, ins);
            });
        }
    });


    //创建一个实例。
    //___target jq目标对象。
    //___divTipID   显示提示文本的div。
    $.CapsLockTip = function (___target) {
        //设置当前实例的配置参数。
        this.target = ___target;
        var _this = this;

        $(document).ready(function () {
            //创建显示大写锁定的div。
            if(null == $.fn.capsLockTip.divTip){
                $("body").append("<div id='divTip__985124855558842555' style='width:100px; height:15px; padding-top:3px; display:none; position:absolute; z-index:9999999999999; text-align:center; background-color:#FDF6AA; color:Red; font-size:12px; border:solid 1px #DBC492; border-bottom-color:#B49366; border-right-color:#B49366;'>大写锁定已打开</div>");
                $.fn.capsLockTip.divTip = $("#divTip__985124855558842555");
            }

            _this.target.bind("keypress", function (_event) {
                var e = _event || window.event;
                var kc = e.keyCode || e.which;
                var isShift = e.shiftKey || (kc == 16) || false;
                $.fn.capsLockTip.capsLockActived = false;
                if ((kc >= 65 && kc <= 90 && !isShift) || (kc >= 97 && kc <= 122 && isShift))
                    $.fn.capsLockTip.capsLockActived = true;
                _this.showTips($.fn.capsLockTip.capsLockActived);
            });

            _this.target.bind("keydown", function (_event) {
                var e = _event || window.event;
                var kc = e.keyCode || e.which;
                if (kc == 20 && null != $.fn.capsLockTip.capsLockActived){
                    $.fn.capsLockTip.capsLockActived = !$.fn.capsLockTip.capsLockActived;
                    _this.showTips($.fn.capsLockTip.capsLockActived);
                }
            });

            _this.target.bind("focus", function (_event) {
                if (null != $.fn.capsLockTip.capsLockActived)
                    _this.showTips($.fn.capsLockTip.capsLockActived);
            });

            _this.target.bind("blur", function (_event) {
                _this.showTips(false);
            });
        });

        //显示或隐藏大写锁定提示。
        this.showTips = function (display) {
            if (display) {
                var offset = _this.target.offset();
                $.fn.capsLockTip.divTip.css("left", offset.left + "px");
                $.fn.capsLockTip.divTip.css("top", offset.top + _this.target[0].offsetHeight + 3 + "px");
                $.fn.capsLockTip.divTip.show();
            }
            else {
                $.fn.capsLockTip.divTip.hide();
            }
        };

        //jq控件公用静态对象。

        //提示框。
        $.fn.capsLockTip.divTip = null;
        //大写锁定键状态
        $.fn.capsLockTip.capsLockActived = null;
    };
})(jQuery);

2
2
分享到:
评论

相关推荐

    JQuery实现输入框大写提示

    在"JQuery实现输入框大写提示"这个场景中,我们的目标是监听用户在密码输入框中的输入,并在用户输入大写字母时提供提示。这涉及到以下几个关键知识点: 1. **事件绑定**:JQuery的`.on()`方法用于绑定事件处理器。...

    发布一个jquery插件-图片纵向(向上)循环滚动

    在我们的案例中,"发布一个jquery插件-图片纵向(向上)循环滚动",我们可能会涉及以下关键点: 1. **HTML结构**:首先,我们需要创建一个包含图片的容器。例如,可以使用`&lt;ul&gt;`标签作为图片列表,每个图片包裹在`...

    jquery插件jquery-ui-1.8.2.custom.min.js

    《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...

    jQuery插件--滑动条

    3. `jquery.jslider.js` - 这是一个jQuery插件文件,专门用于实现滑动条功能。 在使用jQuery插件创建滑动条时,通常需要遵循以下步骤: 1. **引入jQuery库**:首先,我们需要在HTML页面中引入jQuery库,这可以通过...

    jquery插件-pstrength

    `pStrength`是一个基于jQuery的插件,专为网页设计者和开发者提供了一个便捷的方式来检测用户输入的密码强度。它可以帮助用户创建更安全的账户,通过视觉反馈来指导他们选择更加复杂的密码。在当前网络安全问题日益...

    jQuery摄像头插件jquery-webcam-plugin

    **jQuery摄像头插件jquery-webcam-plugin** 在网页开发中,集成摄像头功能可以帮助用户实时捕捉图像,广泛应用于在线证件照上传、视频聊天、虚拟试衣间等场景。`jQuery webcam plugin`是一个优秀的JavaScript库,它...

    jquery插件jquery-ui-1.8.18.custom.min.js及css文件

    首先,`jquery-ui-1.8.18.custom.min.js` 是 jQuery UI 的一个特定版本,1.8.18 表示该版本发布于2012年,是jQuery UI的一个稳定版本。"custom" 指的是这个版本是经过定制的,意味着开发者可能根据项目需求,只包含...

    jquery插件-文章分页插件

    在这个场景中,"jquery插件-文章分页插件"是一个专门为jQuery设计的轻量级组件,用于实现文章或内容的分页功能。 首先,我们来详细了解一下jQuery插件的基本结构和工作原理。jQuery插件通常是一个函数,该函数接收...

    jQuery插件---mcdropdow.(仿下拉框多层次)

    jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)

    jQuery版本迁移辅助插件jquery-migrate-1.2.1.min.js

    jQuery版本迁移辅助插件,如果您使用的低版本jQuery改为高版本后出现错误,可以试试这个插件。用来检测和恢复在jQuery1.9版本中已删除或已过时的API。jquery-migrate-1.2.1.js,jquery-migrate-1.2.1.min.js

    jquery-migrate-1.2.1.js文件

    `jquery-migrate-1.2.1.js` 文件是jQuery的一个辅助工具,它主要用于帮助开发者解决在升级到较新版本的jQuery时可能遇到的向后兼容性问题。这个插件的主要目的是为了警告开发者那些在新版本中已经被废弃或者更改的...

    jquery-3.7.1.zip web组件

    《jQuery 3.7.1:Web组件的核心与应用》 在现代Web开发中,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。标题中的“jquery-3.7.1.zip”表明我们讨论的是...

    jquery-ui插件

    **jQuery UI插件详解** jQuery UI是一个基于JavaScript的开源库,它是jQuery库的扩展,提供了丰富的用户界面组件和交互效果。这个插件以其强大的功能、易于使用的API和可定制的主题而受到开发者的广泛欢迎。在本文...

    jquery插件密码强弱

    "jQuery插件密码强弱"是指利用jQuery扩展功能来实现对用户输入密码强度的评估。这样的插件对于提升用户体验和增强网站安全性至关重要,因为它可以帮助用户创建更强大、更难破解的密码。 首先,我们来了解一下密码...

    jQuery multiple-select-master 插件

    在网页开发中,选择框(select)是一种常见的表单元素,用于让用户从预设的选项中选取一个或多个值。然而,原生HTML的多选框功能相对单一,无法满足现代网页交互的需求。此时,jQuery multiple-select-master插件就...

    JQuery MX-9

    这款插件针对Dreamweaver进行了优化,为开发者提供了一系列便利的工具和扩展,使得在Dreamweaver环境下进行jQuery代码编写变得更加高效和便捷。 ### jQuery 库概述 jQuery 是一个轻量级、高性能的JavaScript库,...

    jQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogs

    jQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogsjQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogsjQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogs

    jquery-1.7.2.js,jquery-1.7.2-vsdoc.js Jquery-1.7.2及vs智能提示插件

    这里的"jquery-1.7.2.js"文件代表了jQuery库的1.7.2版本,这是一个广泛使用的稳定版本,发布于2012年。这个版本在当时包含了众多的改进和修复,以提升性能和兼容性,使得开发者能更高效地处理DOM操作、事件处理、...

    jquery实现父元素大小改变插件:jquery-resize

    `jQuery-resize`插件是jQuery的一个扩展,它允许开发者监听任何DOM元素的尺寸变化,而不仅仅是窗口的大小改变。这极大地拓宽了响应式设计的可能性,使得我们可以对页面上的任意元素进行实时调整,而不仅仅是整个页面...

Global site tag (gtag.js) - Google Analytics