javascript 在“onfocus”事件中检查 CapsLock ON

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11881359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 14:38:48  来源:igfitidea点击:

Check for CapsLock ON in "onfocus" event

javascriptjqueryonfocuskey-events

提问by Santosh

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

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

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

但我想要它用于“onfocus”事件。我尝试用“onfocus”替换控件的“onkeypress”,但它对我不起作用。

Any help? (either in javascript or Jquery)

有什么帮助吗?(在 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> 

回答by nosilleg

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

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

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

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

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.

它还基于观察按键,但不限于较低的 ASCII 字符并处理诸如 Caps Lock 键本身被按下的情况。

Your situation would become something like:

你的情况会变成这样:

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

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

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

回答by gaurang171

Its seems impossible to detect caps lock onfocus I think this may help you please visit this

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

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

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

回答by Liam Wiltshire

Unfortunately not - the keyCode property of the event object is only sent on key-based events (for obvious reasons), which is why it wouldn't work onfocus, onclick etc.

不幸的是不是 - 事件对象的 keyCode 属性仅在基于键的事件上发送(出于明显的原因),这就是为什么它不能在焦点、点击等上工作。

There aren't any other JavaScript ways of doing it - although there is a potential solution if you use flash - but that seems somewhat overkill for your requirements...

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