带有 tabindex 的 DIV：捕获关键事件但在选项卡上跳过答案

【问题标题】：DIV with tabindex: capture key event but skip on tab带有 tabindex 的 DIV：捕获关键事件但在选项卡上跳过
【发布时间】：2019-09-04 07:01:04
【问题描述】：

我需要一个<div>，它应该能够获取按键事件。出于这个原因，我必须添加属性tabindex="0"，正如建议的here。

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

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

【问题讨论】：

为什么你希望 div 有按键事件并且不想专注于那个元素。您想在单击时获取 keydown 事件吗？
是的，我想要 keydown 事件，但我不希望元素可以通过 tab 遍历
如何设置tabindex="-1"？似乎在 FF 和 Chrome 中工作

标签： javascript jquery html keypress

【解决方案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';
    }
}

&lt;div onkeydown="doSomething(this);" contenteditable="true" readonly style="outline:none;"&gt;flsdkjflsajdflkasjdlfkjsaldfkjlksadfj&lt;/div&gt;

【讨论】：

我已经测试过了，但它只有在 contenteditable="true" 时才有效，这不是我的情况！
好的，readonly 属性可以防止编辑，您可以设置没有轮廓的 div 样式。请参阅我的更新答案。

【解决方案2】：

设置 tabindex="-1" 怎么样？似乎可以在 FF 和 Chrome 中使用

【讨论】：