javascript - 在 Chrome 中使用 tabindex 使元素能够接收按键输入的替代方案

Question

我遇到了 Chrome 和 Internet Explorer 之间行为不一致的问题，其中 IE 可以运行，而 Chrome 不能。我正在尝试使表单接受要提交的 Enter 键。这是它的 Javascript:

$("#formElementId").on("keyup", function (e) {
    if (e.keyCode == 13 || e.which == 13) {
        if (e.target.id == "excludedElementId")
            e.stopPropagation();
        else
            document.getElementById("submitButtonId").click();
    }
});

它在 Chrome 中不起作用的原因是 form 元素不接受按键输入。可以通过为 form 元素分配一个 tabindex 值来解决此问题，这将使其能够获得焦点。这是 this SO post 中推荐的解决方案.

这似乎不是正确的解决方案。当聚焦时，元素周围会显示一个软边框，我必须将其隐藏。此外，它的 tabindex 将位于 tabindex 中的实际表单输入控件之前，这是不希望的。

是否有更好的方法来处理 Chrome 的 Enter 键？最后，为什么 IE 接受表单级别的按键输入？

Answer 1

设置 tabindex="-1" 使其可聚焦，但不属于 Tab 键顺序。请参阅MDN有关此行为的文档。

通过 :focus css 选择器为表单使用 css 样式，以在表单获得焦点时控制样式(并在获得焦点时删除其边框或轮廓或任何内容)。