22

如何使用 jQuery 检测 Caps Lock 键的开/关？我有一个密码textbox，我只允许小写字母，所以我不想打开 Caps Lock 键。

是否可以使用 jQuery 检测 Caps Lock 键的状态？

4

6 回答 6

30

如何使用 Javascript 检测 Caps Lock。

function capLock(e){
  var kc = e.keyCode ? e.keyCode : e.which;
  var sk = e.shiftKey ? e.shiftKey : kc === 16;
  var visibility = ((kc >= 65 && kc <= 90) && !sk) || 
      ((kc >= 97 && kc <= 122) && sk) ? 'visible' : 'hidden';
  document.getElementById('divMayus').style.visibility = visibility
}

然后为您的密码表格：

<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
于 2010-02-22T05:02:49.187 回答
14

有一个名为 capslockstate 的 jQuery 插件，它将监视整个页面上大写锁定键的状态，而不仅仅是在特定字段中。

您可以查询大写锁定键的状态或定义事件侦听器以响应状态更改。

与此处的其他建议相比，该插件在检测和状态管理方面做得更好，包括使用非英语键盘，监控 Caps Lock 键本身的使用，以及在输入非字母字符时不要忘记状态。

有两个演示，一个显示基本事件绑定，另一个仅在密码字段具有焦点时显示警告。

例如

$(document).ready(function() {

    /* 
    * Bind to capslockstate events and update display based on state 
    */
    $(window).bind("capsOn", function(event) {
        $("#statetext").html("on");
    });
    $(window).bind("capsOff", function(event) {
        $("#statetext").html("off");
    });
    $(window).bind("capsUnknown", function(event) {
        $("#statetext").html("unknown");
    });

    /*
    * Additional event notifying there has been a change, but not the state
    */
    $(window).bind("capsChanged", function(event) {
        $("#changetext").html("changed").show().fadeOut();
    });

    /* 
    * Initialize the capslockstate plugin.
    * Monitoring is happening at the window level.
    */
    $(window).capslockstate();

    // Call the "state" method to retreive the state at page load
    var initialState = $(window).capslockstate("state");
    $("#statetext").html(initialState);

});

和

$(document).ready(function() {

    /* 
    * Bind to capslockstate events and update display based on state 
    */
    $(window).bind("capsOn", function(event) {
        if ($("#Passwd:focus").length > 0) {
            $("#capsWarning").show();
        }
    });
    $(window).bind("capsOff capsUnknown", function(event) {
        $("#capsWarning").hide();
    });
    $("#Passwd").bind("focusout", function(event) {
        $("#capsWarning").hide();
    });
    $("#Passwd").bind("focusin", function(event) {
        if ($(window).capslockstate("state") === true) {
            $("#capsWarning").show();
        }
    });

    /* 
    * Initialize the capslockstate plugin.
    * Monitoring is happening at the window level.
    */
    $(window).capslockstate();

});

该插件的代码可在 GitHub 上查看。

于 2013-01-07T23:10:35.407 回答
6

但是你忘记了什么。如果您按下 capslock 和 shift 并键入，则不会出现消息“caps is on”。

这是一个更正的版本：

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script language="Javascript">
        $(document).ready(function(){
            $('input').keypress(function(e) { 
                var s = String.fromCharCode( e.which );

                if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) ||
                   (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)){
                    if($('#capsalert').length < 1) $(this).after('<b id="capsalert">CapsLock is on!</b>');
                } else {
                    if($('#capsalert').length > 0 ) $('#capsalert').remove();
                }
            });
        });
    </script>
</head>
<body>
    <label style="float:left;display:block;width:80px;">Login:</label><input type="text" /><br />
    <label style="float:left;display:block;width:80px;">Password:</label><input type="password" /><br />
</body>

于 2011-11-30T07:56:59.900 回答
3

我找到了一个更好的方法来使用jquery：这样你可以检测到用户何时按下大写锁定，用户不需要输入一个字母来检查：（用户需要输入至少1个键来开始检测大写锁定) 演示：http ://arthurfragoso.onphp.net/codes/capslock.html

<html><head><title>Checking Caps Lock using Jquery - Javascript</title></head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<form action="/codes/capslock.html" id="formid"> 

            <div>
                User:
            </div>
            <div>
                <input type="text" id="user" />
            </div>

            <div>
                Password:
            </div>
            <div>
                <input type="password" id="password" />
            </div>

            <div id="capslockdiv" style="display: none; color: red;">
                Caps Lock On
            </div>

        <div>
                <input type="submit" />
            </div>
</form>
<script>
 $(document).ready(
    function () {
        check_capslock_form($('#formid')); //applies the capslock check to all input tags
    }
 );

document.onkeydown = function (e) { //check if capslock key was pressed in the whole window
    e = e || event;
    if (typeof (window.lastpress) === 'undefined') { window.lastpress = e.timeStamp; }
    if (typeof (window.capsLockEnabled) !== 'undefined') {
        if (e.keyCode == 20 && e.timeStamp > window.lastpress + 50) {
            window.capsLockEnabled = !window.capsLockEnabled;
            $('#capslockdiv').toggle();
        }
        window.lastpress = e.timeStamp;
        //sometimes this function is called twice when pressing capslock once, so I use the timeStamp to fix the problem
    }

};

function check_capslock(e) { //check what key was pressed in the form
    var s = String.fromCharCode(e.keyCode);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
        window.capsLockEnabled = true;
        $('#capslockdiv').show();
    }
    else {
        window.capsLockEnabled = false;
        $('#capslockdiv').hide();
    }
}

function check_capslock_form(where) {
    if (!where) { where = $(document); }
    where.find('input,select').each(function () {
        if (this.type != "hidden") {
            $(this).keypress(check_capslock);
        }
    });
}
</script>

</body>
</html>
于 2012-04-18T15:29:56.700 回答
1

我所做的是在以下情况下发出警告

  1. 用户名或密码不正确并且
  2. 提供的用户名或密码全部大写。

只允许使用较小的字母是一个非常糟糕的主意。通过这样做，您可以大量减少可能的密码数量。

于 2010-02-22T05:02:37.650 回答
-8

用户创建密码后，当他们在登录时输入密码时，您可以在服务器上将其转换为小写，然后再检查它是否正确。

这样可以为用户节省精力。

于 2010-04-30T16:05:51.387 回答