Question

所以我一直在使用JavaScript / jQuery研究表单的Caps Lock检测解决方案。 stackoverflow上有一个巨大的线程，提供了许多解决方案。但唯一的问题是他们不会检查是否直接按下Caps Lock。它们检测是否输入了大写字母并且没有按下shift键。这样做的缺点是我的Caps Lock警告消息不会在用户开始输入表单之前打开/关闭，这几乎不是最佳选择。这是我的代码。

document.onkeypress = function(e){
    e = e || window.event;
    var s = String.fromCharCode(e.keyCode || e.which);
    if (s.toUpperCase() === s && !e shiftKey) {
        capsWarning.style.visibility = 'visible';
    } else {
        capsWarning.style.visibility = 'hidden';
    }
}

当我按下Caps Lock键时，是否有更好的方法可以触发大写锁定消息？也就是说，在我开始输入之前，不要延迟切换消息？

最好是我更喜欢JQuery的纯JavaScript解决方案。虽然如果你认为jQuery真的非常好，请说明原因，我可以向我的同事施压，让我把它包含在这里; o

Answer 1

我已经使用了这段代码并尝试发送一个事件。 getModifierState ^MSDN，MDN除了false之外不会返回。实际上，您将发送一个字符 - “a”或“A”。两种情况都是硬编码。

getModifierState仅在真正按键的情况下才会返回true。

但 IE 11 （<input type="password" />）

中有自动CapsLock检测

            var eventType = "keypress";
            window.addEventListener ( eventType, function(e){
                var msg = "Key Pressed: " + String.fromCharCode(e.charCode) + "\n" + "charCode: " + e.charCode + "\n" + e.getModifierState ( "CapsLock" );
                console.log ( msg );
            }, false );

            function simulateKeyEvent() {
                var evt = document.createEvent("KeyboardEvent");
                var initMethod = typeof evt.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

                evt[initMethod](
                    "keypress",         // type,
                    true,               // bubbles,
                    true,               // cancelable,
                    window,             // viewArg, 
                    0,                  // ctrlKeyArg,
                    0,                  // altKeyArg,
                    0,                  // shiftKeyArg,
                    0,                  // metaKeyArg, 
                    /* lower a */ 97,   //  keyCodeArg,
                    /* lower a */ 97    //  charCodeArg
                );
                window.dispatchEvent(evt);
            }
            simulateKeyEvent();

Answer 2

我在chrome中测试了这个并且它工作了，把这个JavaScript放在标签

中

function  loadcaps ( e ) {
     e = e || window.event;
     var s = String.fromCharCode( e.keyCode || e.which );
     if ( s.toUpperCase() === s && !e.shiftKey ) {            
          capsWarning.style.visibility = 'visible';
     } else {
          capsWarning.style.visibility = 'hidden';
     }
  }

并将其放在您的代码上

<body onload="loadcaps()">

让我知道它是否适合你。

Answer 3

使用以下提及代码：

<script 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('divon').style.visibility = 'visible';
       document.getElementById('divoff').style.visibility = 'hidden';
     }else{
      document.getElementById('divon').style.visibility = 'hidden';
       document.getElementById('divoff').style.visibility = 'visible';
    }
    }
    </script>
    <input type="text" name="trackcaps" onkeypress="capLock(event)" />
    <div id="divon" style="visibility:hidden">Caps Lock is on.</div>`enter code here`
    <div id="divoff" style="visibility:hidden">Caps Lock is off.</div>

Answer 4

使用onkeydown处理程序：

document.onkeypress=function(){console.log(arguments);}

如何使用JavaScript检测页面加载（即不是按键）上的Caps Lock状态？

4 个答案: