`
frank1998819
  • 浏览: 758254 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类

在Web下输入密码时提示大写锁定键(转)

 
阅读更多

作者:http://www.cnblogs.com/mrhgw/archive/2012/04/21/2461566.html

 

功能介绍:
在Web下输入密码时提示大写锁定键,封装成jq插件方便有需要的同学!

使用:
$("#txtPWD").capsLockTip();

截图预览:

代码(2012-05-03 10:20最后修改):

1. 使用公用静态对象,使多个密码框共享状态。
2. 增加focus 和 blur事件,提示更方便及时。
3. 优化代码。
4. 使用:$("#txtPWD").capsLockTip(); //注意不要将些代码加在$(document).ready()里面。
5. 修正页面在Post后插件失效。

 

//=============== 大写锁定键打开提示 ============================================//
/*
使用:$("#txtPWD").capsLockTip(); //注意不要将些代码加在$(document).ready()里面。
*/
(function ($) {
    $.fn.extend({
        capsLockTip: function () {
            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 () {        
            _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);
            });
        });

        //创建显示大写锁定的div。
        this.createTooltip = function(){
            if(null != $.fn.capsLockTip.divTip)
                return $.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");

            return $.fn.capsLockTip.divTip;
        };

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

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

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

分享到:
评论

相关推荐

    输入密码时检测大写是否锁定的js代码.docx

    其中一项提升用户体验的功能就是在用户输入密码时检测大写锁定键的状态,并及时给予提示。这样可以避免用户因为不小心开启了大写锁定而导致密码输入错误,从而减少不必要的重试次数。 #### 二、技术原理 在...

    在输入框输入字符时检测大写锁定

    3. **性能优化**:为了进一步提升用户体验,可以考虑只在首次检测到大写锁定被启用时才显示提示信息,而不是每次按下大写锁定键都显示。 4. **异常处理**:虽然示例中的代码相对简单,但在实际应用中还需要考虑异常...

    输入密码时检测大写是否锁定的js代码

    这将有助于提高用户在输入密码时的准确性和安全性,避免因大写锁定键的意外激活而导致的密码错误。开发者需要确保在实际应用中准确地使用这些技术点,并适当地处理各种键盘状态,以提供更好的用户体验。

    输入密码检测大写是否锁定js实现代码.docx

    2. **触发条件**: 当用户开始在密码输入框中输入字符时,应该立即检测大写锁定键的状态。 3. **提示方式**: 如果检测到大写锁定键被开启,则需要通过某种方式(如弹出提示信息)告知用户当前状态。 4. **响应机制**:...

    电脑键盘大写锁定键capslock失灵该怎么解决?.docx

    在计算机键盘中,大写锁定键(CapsLock)是一个非常重要的功能键,它可以帮助用户快速地将字母从小写转换为大写或从大写转换为小写。但是,有时候我们可能会遇到CapsLock键失灵的问题,导致无法正常地进行大小写转换...

    判断密码输入是否开启大写

    在Java Web开发中,判断用户输入的密码是否包含大写字母是常见的安全性需求,这有助于增强密码复杂性,提升账户安全。以下将详细介绍如何实现这一功能,并探讨相关知识点。 首先,我们需要理解Java中的字符串处理...

    易语言取大写键状态源码.zip

    例如,当用户在密码输入框中输入时,程序需要能够及时反馈大写锁定键的状态,以免用户在不知情的情况下输入了错误的大小写字母。通过易语言提供的功能,开发者可以轻松实现这一功能,提高用户体验。

    JQuery实现输入框大写提示

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

    误按大写锁定键Win7发声及时提醒你.docx

    这一功能可以帮助用户在不小心按下这些键时得到及时的反馈,尤其适用于需要快速输入且避免误触大写锁定键或数字锁定键的场合。 在Windows 7中实现这一功能的步骤如下: 1. 首先,点击桌面左下角的“开始”按钮。 2...

    输入密码检测大写是否锁定js实现代码

    当用户在输入密码时,如果大写锁定被无意中打开,系统会立即通过显示提示信息来告知用户,使用户能够及时发现并纠正错误,从而避免了潜在的登录问题。 总结来说,文章中提到的JavaScript代码实现了一个非常实用的...

    易语言源码易语言取大写键状态源码.rar

    例如,如果用户在输入密码时误触了大写锁定键,程序可能需要提供相应的提示。易语言通过提供特定的函数或方法来获取这种状态,使得开发者可以方便地实现这一功能。 在易语言中,通常会有一个或多个函数来处理键盘...

    取大写键状态.rar

    这个功能在各种应用中都有可能用到,例如为了提供用户友好的界面,当用户尝试输入密码或者敏感信息时,系统可能会提醒他们大写锁定键是否开启,以避免输入错误。在易语言中实现这一功能,我们可以深入探讨以下几个...

    汇编 从键盘输入一串英文字母,分别将其转换为大写、小写并输出

    ### 汇编语言程序:从键盘输入一串英文字母,分别将其转换为大写、小写并输出 #### 程序概述 本文档介绍了一个简单的汇编语言程序,该程序允许用户通过键盘输入一系列英文字母,并将这些字母分别转换成大写和小写...

    精彩编程与编程技巧-输入时,自动转换成大写?...

    - **密码输入**:在登录系统时,为了安全考虑,可以将用户输入的密码统一转换为一种大小写格式。 - **数据标准化**:在处理用户输入的数据时,确保所有输入都符合统一的格式标准,比如将地址、姓名等信息中的字母...

    输入数字转换为大写金额输出

    例如,在开具支票时,需要将数字金额转换成大写形式,以避免被篡改。这种转换在计算机编程中是一个常见的需求。 #### 关键知识点 ##### 1. 大写金额转换的基本原理 大写金额转换主要涉及两个方面:一是将数字转换...

    C语言程序设计-将从键盘上输入的每个单词的第一个字母转换为大写字母,输入时各单词必须用空格隔开,用’.’结束输入; .c

    C语言程序设计-将从键盘上输入的每个单词的第一个字母转换为大写字母,输入时各单词必须用空格隔开,用’.’结束输入; .c

    在C语言中输入一个大写字母,将其转变成一个小写字母,并且有相应的提示。

    `printf()` 函数用于向用户打印提示信息,让他们输入一个大写字母。`scanf()` 函数则负责从标准输入读取用户的输入,并将其存储在变量 `a` 中。 `%C` 是 `scanf()` 和 `printf()` 函数中用于处理字符的格式符,它与...

    从键盘输入一个字符串,将其中的小写字母全部转换成大写字母,然后输出到一个磁盘文件“test”中保存。输入的字符串以“!”结束.

    在本程序中,我们需要将输入的字符串中的小写字母转换成大写字母。这个过程可以通过遍历字符串,每遇到一个小写字母便将其转换成大写字母。这个过程可以使用 ASCII 码表来实现,因为小写字母和大写字母之间的 ASCII ...

    word2021输入英文字母都是大写的(大写键没打开)怎么办?.docx

    在使用Microsoft Word 2021时,可能会遇到一个令人困惑的问题:即使大写锁定键(Caps Lock)并未开启,输入的英文字符仍然显示为大写。这个问题可能是由于某些特定的快捷键组合被误按导致的。下面我们将详细讨论这个...

Global site tag (gtag.js) - Google Analytics