在Javascript中如何检测按下ALT键？

Question

我们正在创建一个看起来像桌面窗口的Web用户界面。 现在我们需要处理Alt键。当按下Alt键时，焦点移到上方菜单。

在Javascript中，如何获取仅当按下Alt键时的事件？

我需要确保没有同时按下其他键。

- Riera

Answer 1

可能像这样

document.onkeydown = keydown;

function keydown(evt) {
    if (!evt) evt = event;
    if (evt.altKey) {
        console.log('alt');
    }
} // function keydown(evt)​

<input type"text" onkeydown="keydown" />

- Ricky

---

还有一些类似于 evt.ctrlKey（表示ctrl键）的东西。 - Ricky

Answer 2

工作中的演示

document.onkeyup = KeyCheck;       

function KeyCheck(e)
{
   var KeyID = (window.event) ? event.keyCode : e.keyCode;
   switch(KeyID)
   {
      case 18:
      document.Form1.KeyName.value = "Alt";
      // do your work on alt key press....
      break; 

      case 17:
      document.Form1.KeyName.value = "Ctrl";
      break;
   }
}

你的HTML代码可能是这样的：

而你的html可能像这样

。

<form name="Form1">

<input type="text" name="KeyName" value="" />

</form>​

注意：如果您想在除其他控件/类型之外获得alt事件，则可以根据您的要求进行修改。

- Talha

---

谢谢您的回答，但是如果同时按下另一个键（如Alt+L），事件仍然会被触发。此外，当按下alt键时，函数必须返回false，因为Windows会将焦点放在浏览器工具栏中。 - Riera

Answer 3

只需加入e.preventDefault();

$(document).on('keydown', function (e) {
    if (e.key === 'Alt') {
        e.preventDefault();
    }
});

- Jon Snow

---

请尽量清晰地解释为什么这是问题的答案。这个解决方案是否像问题中所述那样独占触发？ - Jeroen Heier

Answer 4

我不确定这是否是最优雅的解决方案，但它可以很好地运行。

$(function()
{
    //Flag to check if another key was pressed with alt
    var vAnotherKeyWasPressed = false;
    //ALT keycode const
    var ALT_CODE = 18;

    //When some key is pressed
    $(window).keydown(function(event)
    {
        //Identifies the key
        var vKey = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
        //The last key pressed is alt or not? 
        vAnotherKeyWasPressed = vKey != ALT_CODE;
    });

    //When some key is left
    $(window).keyup(function(event)
    {
        //Identifies the key
        var vKey = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

        //If the key left is ALT and no other key is pressed at the same time...
        if (!vAnotherKeyWasPressed && vKey == ALT_CODE)
        {
            //Focus the menu
            $('#myMenu').focus();
            //Stop the events for the key to avoid windows set the focus to the browser toolbar 
            return false;
        }
    });
});

- Riera

---

这个解决方案看起来是目前所有解决方案中最好的，因为它将兼容更多的浏览器。并非所有浏览器都理解event.keyCode，有些使用event.which。而这个解决方案则覆盖了所有情况。 - Brandon

"keyCode"已被弃用https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode，但是`altKey`(布尔值)属性甚至更好。 - Jan Dolejsi

Answer 5

使用 event.preventDefault() 来避免触发当前事件的 Alt。

例如，当你按下 space 键时，页面会自动滚动到底部，所以使用 preventDefault 来避免此默认行为。对于 Alt 键也是同样的道理。

function handleOnkeydown(evt) {
    if (!evt.altKey) return;
    event.preventDefault();
    console.log('alt key with prevent default');
} 

const input = document.querySelector('input');
input.addEventListener('keydown', handleOnkeydown);

<input type="text" />

- Fabio Ribeiro de Carvalho