8

So I've been researching solutions for Caps Lock detection for a form, using JavaScript/jQuery. There is a huge thread on stackoverflow offering many solutions. But the only problem is they don't check whether Caps Lock is pressed directly per se. They detect whether a capital letter has been entered and that the shift key has not been depressed. The drawbacks of this is that my Caps Lock warning message will not toggle on/off until the user starts typing into the form, which is hardly optimal. Here is my code.

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';
    }
}

Is there a better way, that I can trigger a caps lock message, with JavaScript when I press the Caps Lock key? That is, not delay toggling message until I start typing?

Preferably I'd prefer a pure JavaScript solution to JQuery. Although if you think jQuery would be really really really good here say why and I could pressure my colleague to let me include it here ;o

4

4 回答 4

0

我已经使用了这段代码并尝试分派一个事件。getModifierState MSDN、MDN不会返回 false 以外的值。实际上，您将按原样发送一个字符-“a”或“A”。无论哪种情况，它都会被硬编码。

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

但是在IE 11中有一个自动 CapsLock 检测（for <input type="password" />）

            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();
于 2015-08-20T11:58:49.710 回答
0

我在 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()">

请让我知道这对你有没有用。

于 2016-12-08T18:27:29.660 回答
0

使用以下提及代码：

<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>
于 2018-07-25T11:27:38.833 回答
-4

使用onkeydown处理程序：

document.onkeypress=function(){console.log(arguments);}
于 2015-08-03T16:21:46.047 回答