在"对焦"事件中检查CapsLock ON是否打开

我以下用于检查 Capslock 是否打开的代码在"onkeypress"事件中工作正常。

但我希望它用于"聚焦"事件。我尝试将"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>

有一个名为capslockstate的jQuery插件，它将跟踪caps锁定键的状态，允许您在需要时使用该信息。

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

它还基于监视按键，但不限于较低的 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化，还可以做更多的事情。

不幸的是不是

- 事件对象的 keyCode 属性仅在基于键的事件上发送（出于显而易见的原因），这就是为什么它不适用于焦点、点击等。

没有任何其他 JavaScript 方法可以做到这一点 - 尽管如果您使用 flash 有一个潜在的解决方案 - 但这似乎对您的要求有些矫枉过正......

似乎不可能检测到大写锁定焦点我认为这可能会对您有所帮助，请访问此

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

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

#Code 检测 capsLock 是打开的，当我们把鼠标放在输入字段中......

<!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>

相关内容

最新更新

热门标签：