javascript - 带有 tabindex : capture key event but skip on tab 的 DIV

Question

我需要一个 <div>那应该能够获得按键事件。出于这个原因，我必须添加属性 tabindex="0" , 按照建议 here .

“附带效应”是 <div>变得“可制表”，这是不希望的，因为制表符应该只遍历输入字段。

是否有避免它的“技巧”，或者唯一的方法是捕获选项卡事件，搜索下一个输入字段(因此跳过 DIV)而不是防止默认行为？

Answer 1

你可以用这个来测试。

function doSomething(ctrl)
{
    // Prevent default behaviour
    event.preventDefault();
    
    if (event.key === 'Enter')
    {
        ctrl.innerHTML = 'Enter is pressed';
    }
    else if (event.key === 'ArrowDown')
    {
        ctrl.innerHTML = 'ArrowDown is pressed';
    }
}

<div onkeydown="doSomething(this);" contenteditable="true" readonly style="outline:none;">flsdkjflsajdflkasjdlfkjsaldfkjlksadfj</div>