在“onfocus”事件中检查 CapsLock ON答案

【问题标题】：Check for CapsLock ON in "onfocus" event在“onfocus”事件中检查 CapsLock ON
【发布时间】：2012-08-06 13:22:19
【问题描述】：

我下面用于检查 Capslock 是否打开的代码在“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>

【问题讨论】：

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

标签： javascript jquery onfocus key-events

【解决方案1】：

有一个名为 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>

请注意，我只对基本部分进行了 jQueryified，还有更多工作要做。

【讨论】：

@mondjunge 发生这种情况是因为我已经热链接了来自 Github 的内容。他们不希望人们这样做，并添加了一些标题来防止它。然而，Firefox 是目前唯一尊重标头的浏览器。正确托管后，该脚本适用于所有浏览器。
@mondjunge 我终于可以通过使用 js 的非阻塞版本来修复演示。感谢您在很久以前报告此问题。

【解决方案2】：

不幸的是，事件对象的 keyCode 属性仅在基于键的事件上发送（原因很明显），这就是为什么它在 onfocus、onclick 等上不起作用的原因。

没有任何其他的 JavaScript 方法可以做到这一点 - 尽管如果你使用 flash 有一个潜在的解决方案 - 但这对于你的要求来说似乎有点过分......

【讨论】：

forums.adobe.com/message/3349870 - 讨论了使用 flash 进行操作 - 如果大写锁定打开，则拥有一个显示消息的小型 swf 确实是您唯一的方法。

【解决方案3】：

似乎无法检测到 caps lock onfocus 我认为这可能会对您有所帮助，请访问此

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

【讨论】：