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

时间:2015-10-22 18:29:14

标签: javascript javascript-events tabs keyboard-events capslock

不使用altKeyshiftKeyctrlKey,是否可以检测到它们,包括 CapsLock Tab 和< kbd>空间?

1 个答案:

答案 0 :(得分: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 更改焦点。
代码只是一个例子,必要时进行更改。