在“onfocus”事件中检查是否打开了大写锁定键

Question

在“onfocus”事件中检查是否打开了大写锁定键

3

我的以下代码用于检查大写锁定键是否打开，在“onkeypress”事件上运行良好。

但我希望它在“onfocus”事件上运行。我尝试将控件的“onkeypress”替换为“onfocus”，但对我来说无法工作。

有任何帮助吗？（无论是javascript还是Jquery）

 <script type="text/javascript" language="Javascript">
    function capLock(e) {
        kc = e.keyCode ? e.keyCode : e.which;
        sk = e.shiftKey ? e.shiftKey : ((kc == 16) ? true : false);
        if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk))
            document.getElementById('divMayus').style.visibility = 'visible';
        else
            document.getElementById('divMayus').style.visibility = 'hidden';
    }
</script>

<input type="text" name="txtuname" />
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>

- Santosh

上面的链接询问大写锁定检测代码...这里我在询问其他事件...我有代码...但我需要它在另一个事件中。 - Santosh

4个回答

1

很遗憾 - 事件对象的keyCode属性仅在基于键的事件中发送（出于显而易见的原因），这就是为什么它在onfocus、onclick等事件上不起作用的原因。

没有其他JavaScript方法可以解决这个问题 - 尽管如果您使用Flash，可能有一个潜在的解决方案 - 但这似乎对您的要求过于繁琐了...

- Liam Wiltshire

http://forums.adobe.com/message/3349870 - 这个讨论如何使用Flash来实现，拥有一个小的SWF文件，如果大写锁定键开启，则显示一条消息，这确实是你唯一的选择。 - Liam Wiltshire

0

似乎无法在焦点上检测大写锁定键状态。我认为这可能会对您有所帮助，请访问此链接。

http://jaspreetchahal.org/jquery-caps-lock-detection-plugin/

- gaurang171

0

很简单... 使用mousedown而不是focus。

#当我们将鼠标放在输入框内时，检测大写锁定是否打开的代码...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="inputme">
    <p id="log" style="color:red"></p>
    <script>
        function checkCapsLock(e) {
          if (e.getModifierState('CapsLock'))
              log.textContent = `capsLock is ON!`;
          else 
              log.textContent = ``;
        }
        inputme.addEventListener('mousedown', checkCapsLock);
        inputme.addEventListener('keyup', checkCapsLock);
    </script>
</body>
</html>

- rajat kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nosilleg · Accepted Answer

有一个名为 capslockstate 的 jQuery 插件，它可以跟踪大写锁定键的状态，使您可以在需要时使用该信息。

它将监视整个页面的状态，然后当所需元素获得焦点时，您可以检索状态。

它还基于监视按键，但不仅限于较低的 ASCII 字符，并处理 Caps Lock 键本身被按下的情况。

您的情况将变成：

<script src="{path-to}/jquery-capslockstate.js"></script>
<script>
    $(document).ready(function() {
        $(window).capslockstate();

        $(window).bind("capsOn", function(event) {
            if ($("#txtPassword:focus").length > 0) {
                document.getElementById('divMayus').style.visibility = 'visible';
            }
        });
        $(window).bind("capsOff capsUnknown", function(event) {
            document.getElementById('divMayus').style.visibility = 'hidden';
        });
        $("#txtPassword").bind("focusout", function(event) {
            document.getElementById('divMayus').style.visibility = 'hidden';
        });
        $("#txtPassword").bind("focusin", function(event) {
            if ($(window).capslockstate("state") === true) {
                document.getElementById('divMayus').style.visibility = 'visible';
            }
        });
    });
</script>

<input type="text" name="txtuname" />
<input type="password" name="txtPassword" id="txtPassword" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>

请注意，我只对必要部分进行了jQuery化，还有更多的工作需要完成。