如何在 JavaScript 中检测 CapsLock 和其他非字母数字特殊修饰键？答案

【问题标题】：How to detect CapsLock and other non-alphanumeric special modifier keys in JavaScript?如何在 JavaScript 中检测 CapsLock 和其他非字母数字特殊修饰键？
【发布时间】：2015-10-22 18:29:13
【问题描述】：

不使用altKey、shiftKey、ctrlKey，是否可以检测到它们包括CapsLock、Tab和Space ?

【问题讨论】：

标签： javascript dom-events keyboard-events capslock

【解决方案1】：

这是一种有趣的方法，您可以通过该方法找出在 JavaScript 中按下了哪个键。这很有帮助

根据按下的键触发操作。
通过创建缩进而不是切换焦点来防止 Tab 播放剧透
确定 Caps Lock 是否打开。尤其是在填写表单字段时，可以通知用户。
使用箭头键进行导航等。

这是 JavaScript 代码：-

    window.addEventListener("keypress", function(e){
         console.log(e.keyCode);
    });

    window.addEventListener("keydown", function(e){
         if(e.keyCode==9)       
         {   
              console.log("You Pressed Tab");
              e.preventDefault();
         }
    });

    window.addEventListener("keyup", function(e){
        var keyPressed; 
        switch(e.keyCode)
        {
            case 9: return;   // already handled above
            case 18: keyPressed="Alt"; e.preventDefault(); break;
            case 20: keyPressed="Caps Lock"; break;
            case 17: keyPressed="Ctrl"; break;
            case 16: keyPressed="Shift"; break;
            case 37: keyPressed="Left A"; break;
            case 38: keyPressed="Top A"; break;
            case 39: keyPressed="Right A"; break;
            case 40: keyPressed="Bottom A"; break;
            default: keyPressed=e.keyCode;
        }
        console.log("You pressed "+keyPressed);
    });

switch case 构造不在keydown 处理程序中的原因是我个人不喜欢在按住键时多次执行处理程序。当然更多的键可以添加到switch 案例中。另请注意，Tab 在keydown 下。这是因为 Tab 是在按键按下时触发的。如果它被放在keyup 下，keypress 处理程序将不会被触发，改变窗口焦点，并使keyup 处理程序无用。 preventDefault() 防止 Tab 和 Alt 改变焦点。
代码只是一个说明，根据需要进行更改。

【讨论】：