使HTML元素不可聚焦

是否可以使HTML元素不可聚焦

我知道这是可以定义的，用户可以通过按Tab键浏览这些元素。我还看到，这是由浏览器来控制的

---

但也许有一种方法可以使某些元素不可聚焦，比如说我希望用户在按Tab键时跳过某个

标记

TabIndex是您要查找的内容：

将tabIndex值设置为-1时，在表单中使用tabIndex时将跳过该值。

<a href="http://foo.bar" tabindex="-1">unfocusable</a>

负值表示元素应该是可聚焦的，但不应该通过顺序键盘导航来访问

---

另请参见：

对于不希望焦点集中在选项卡上的元素，必须将tabindex设置为负值。

要完全防止焦点集中，而不仅仅是在使用选项卡按钮时，请将

禁用

设置为HTML元素中的属性

点击这个，你可以看到它的焦点。
点击这个，你可以看到它的焦点。
点击这个，你可以看到它的焦点。不可能。
单击此按钮，您可以看到它不可聚焦。

我使用了

focusable=“false”

，因为

tabindex=“-1”

在IE中不起作用

---

为了防止元素聚焦（“非聚焦”），您需要使用Javascript监视

聚焦并防止默认交互

为了防止元素被tab到，请使用
tabindex=-1
属性

添加
tabindex=-1
将使任何元素都可以聚焦，甚至
div
元素。这意味着当用户点击它时，它可能会得到一个焦点轮廓，这取决于浏览器

理想情况下，您希望：

function preventFocus(event) {
  event.preventDefault();
  if (event.relatedTarget) {
    // Revert focus back to previous blurring element
    event.relatedTarget.focus();
  } else {
    // No previous focus target, blur instead
    event.currentTarget.blur();
  }
}

/* ... */

element.setAttribute('tabindex', '-1');
element.addEventListener('focus', preventFocus);

如果没有JavaScript，将默认的可聚焦HTML元素设置为不可聚焦HTML元素是不可能的

在深入研究与焦点相关的DOM事件之后，我提出了以下实现（基于@ShortFuse，但修复了一些问题和边缘情况）：

这是在TypeScript中实现的，但是可以很容易地针对普通JavaScript进行调整。
请记住，将小于0的数字作为
tabindex
的值是无效的HTML（尽管我认为它在HTML5中是有效的）。请注意，具有负tabindex的元素仍然是可聚焦的，使用顺序焦点导航（即选项卡）无法访问它。对于某些元素（如SVG节点），这在IE中不起作用。请参阅下面Zohid的答案，以获得解决方案。React开发人员只需附带说明：不要忘记camelCase和括号：tabIndex={-1}我对这个答案投了反对票，因为它不是问题的确切内容。对我来说，这对我没有帮助。使用Tab时元素被忽略，但仍然可以自动聚焦。因此，无论如何，为了使其不可聚焦，我们需要添加
disabled
属性，正如@Randy的回答中所提到的。问题的可能重复部分措词错误。它应该是：“如何使HTML元素不可标记？”这是原始海报想要的。这不是OP想要实现的。您的示例将禁用该文本框。禁用的文本字段与不可聚焦的文本字段不同。他仍然希望他的按钮可以点击，但希望他的文本字段在他点击按钮时仍然保持焦点。如果某个项目不可聚焦，则通过单击等方式与之交互将意味着当前聚焦的项目保持聚焦。这就是OP想要实现的。@Richard我已经给出了使元素不可聚焦的示例。由op决定是否接受答案。你所描述的在HTML规范中是不可能的。投票否决我的答案伤害了我，因为这个答案不是一个坏答案，如果你看投票否决的话，它帮助了很多人。我更希望你对那些完全错误的答案投反对票，而不是我的答案显示出最好的解决方案。根据你的描述，OP接受的答案也是错误的。请阅读下面的旅行并重新考虑下投票。这对于非代码>输入<代码>元素不适用。如果我不希望<代码> <代码>能够接收焦点，<代码>禁用<代码>没有帮助。这似乎是IE对于SVG元素使用的非标准属性：不幸的是在滑块上。
    // A focus event handler to prevent focusing an element it attached to
    onFocus(event: FocusEvent): void {
        event.preventDefault();

        // Try to remove the focus from this element.
        // This is important to always perform, since just focusing the previously focused element won't work in Edge/FF, if that element is unable to actually get the focus back (became invisible, etc.): the focus would stay on the current element in such a case
        const currentTarget: any | null = event.currentTarget;
        if (currentTarget !== null && isFunction(currentTarget.blur))
            currentTarget.blur();

        // Try to set focus back to the previous element
        const relatedTarget: any | null = event.relatedTarget;
        if (relatedTarget !== null && isFunction(relatedTarget.focus))
            relatedTarget.focus();
    }

   // Not the best implementation, but works for the majority of the real-world cases
    export function isFunction(value: any): value is Function {
        return value instanceof Function;
    }