在“onfocus”中检查CapsLock ON事件 [英] Check for CapsLock ON in "onfocus" event

问题描述

我的以下代码用于检查Capslock是否启用在onkeypress事件上正常工作。

My following code for checking whether Capslock is on or not works fine on "onkeypress" event.

但我希望它用于onfocus事件。
我试图用onfocus替换onkeypress作为控件，但它对我不起作用。

But i want it for "onfocus" event. i tried replacing "onkeypress" with "onfocus" for the control,but it doesnt work for me.

任何帮助？ （在javascript或Jquery中）

Any help? (either in javascript or 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 ，它将跟踪大写锁定键的状态，允许您在需要时使用该信息。

There is a jQuery plugin called capslockstate which will keep track of the state of the caps lock key, allowing you to use that information as and when needed.

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

It will monitor the state for the entire page, and then you can retrieve the state when the desired element gains focus.

它也基于观看按键，但不限于较低的ASCII字符，并处理按下Caps Lock键本身的情况。

It's also based on watching key presses, but not limited to lower ASCII characters and handles situations like the Caps Lock key itself being pressed.

你的情况会变成类似：

<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基本位，仍然可以做更多。

Note that I've only jQueryified the essential bits, more could still be done.

这篇关于在“onfocus”中检查CapsLock ON事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！