使HTML元素不可聚焦

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

我了解可以定义一个可以获取焦点的元素列表，并且用户可以通过按一个Tab键来浏览这些元素。我还看到，这取决于浏览器来控制。

但是也许有一种方法可以使某些元素无法聚焦，比如说我希望用户<a>按下a时跳过某个标签Tab。

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

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

另请参阅：developer.mozilla.org

为了完全避免焦点集中（不只是在使用tab按钮时），还应disabled将其设置为HTML元素中的一个属性。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<input class="form-control" type="text"> Click this, you can see it's focusable.

<input class="form-control" type="text" readonly>  Click this, you can see it's focusable.

<input class="form-control" type="text" readonly tabindex="-1">  Click this, you can see it's focusable. Not tab'able.

<input class="form-control" type="text" disabled>  Click this, you can see it's <strong>not</strong> focusable.

为了防止某个元素获得焦点（“不可聚焦”），您需要使用Javascript来监视focus和防止默认交互。

为了防止将元素制表到选项卡，请使用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);

TabIndex是您所需要的：http : //www.w3schools.com/jsref/prop_html_tabindex.asp。

将tabIndex值设置为-1时，在浏览表单时将跳过它。

我使用focusable="false"，因为tabindex="-1"无法在IE中工作。

对于您不想集中在tab上的元素，必须将tabindex设置为负值。

如果没有JavaScript，则无法将默认可聚焦的HTML元素设置为不可聚焦的HTML元素。

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

    // 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;
    }

这是在TypeScript中实现的，但可以很容易地针对纯JavaScript进行调整。

我刚刚在阅读YouTube源代码，看到了focusable =“ false”

<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="" fill="#4285F4" viewBox="0 0 24 24" height="24" width="24" style="margin-left: 4px; margin-top: 4px;"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>

这是一个更正确的答案吗？