Tab 按键事件不起作用（原生 JavaScript）

Question

所以我最近一直在学习JavaScript，但我似乎无法弄清楚为什么以下代码不起作用。我在 "enter" 上使用了一个按键事件（按键代码 13，以防万一有人好奇）并且它运行良好。但是我无法使用按键代码 9（制表符）。

函数 listItemTab 本身似乎可以工作，但它从未进入我的 if 语句（我的 console.log 从未执行）。

下面是 the codepen I've been working，因此您可以在我的 html.

上下文中查看所有代码

var myList = document.getElementById("my-list");
var listItems = myList.querySelectorAll("li");
var inputs = myList.querySelectorAll("input");

for(var i = 0; i < listItems.length; i++){
    inputs[i].addEventListener("keypress", listItemTab);
}

function listItemTab(event){
    if(event.which === 9){
        console.log("tab pressed");
    }
}

在此先感谢您的帮助！ :)

Answer 1

尝试使用 keydown 事件而不是 keypress 事件。 Keydown 首先触发。如果您想留在输入中，也可以防止默认操作。（如果你不想留在输入中，只需删除该行）

inputs[i].addEventListener("keydown", listItemTab);

// not working yet
function listItemTab(event){    
    event.preventDefault();
    if(event.which === 9){
        console.log("tab pressed");     
    }
}

Tab 按键事件不起作用（原生 JavaScript）

Tab keypress event doesn't work (native JavaScript)

javascript

events

keypress