Question

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

我知道可以定义a list of elements that can receive focus，并且用户可以通过按 Tab 键来浏览这些元素。我也看到由浏览器来控制它。

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

Answer 1

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

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

https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes/tabindex

Answer 2

要完全阻止焦点，而不仅仅是在使用标签按钮时，请将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.

Answer 3

TabIndex就是您所寻找的：http://www.w3schools.com/jsref/prop_html_tabindex.asp。

当您将tabIndex值设置为-1时，您将在表格中跳过时跳过它。

Answer 4

我使用了focusable =＆＃34; false＆＃34;因为tabindex =＆＃34; - 1＆＃34;在IE中无法正常工作

Answer 5

为了防止元素聚焦（“不可聚焦”），您需要使用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);

Answer 6

对于您不希望专注于标签的元素，您必须将tabindex作为负值。

Answer 7

我只是在阅读YouTube源代码，我看到有关焦点=＆＃34; false＆＃34;

;WITH test_table(CenterID)AS( SELECT '735121201' UNION ALL SELECT '735120001' UNION ALL SELECT '5442244' UNION ALL SELECT '735141094' UNION ALL SELECT '735141097' UNION ALL SELECT '4008060' UNION ALL SELECT '735117603' UNION ALL SELECT '40100000' UNION ALL SELECT '735142902' UNION ALL SELECT '735151199' UNION ALL SELECT '4010070' ),t1 AS ( SELECT *,ROW_NUMBER()OVER(ORDER BY(SELECT 1)) AS rn,CASE WHEN LEFT(t.CenterID,1)='7' THEN 1 ELSE 0 END AS isSeven FROM test_table AS t ),t2 AS( SELECT t1.*,ROW_NUMBER()OVER(ORDER BY t1.rn) AS toFilter FROM t1 LEFT JOIN t1 AS pt ON pt.rn=t1.rn-1 WHERE pt.CenterID IS NULL OR (t1.isSeven=1 AND pt.isSeven=0) ) SELECT t1.CenterID,x.toFilter FROM t1 CROSS APPLY(SELECT TOP 1 t2.toFilter FROM t2 WHERE t2.rn<=t1.rn ORDER BY rn desc) x

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

Answer 8

如果没有JavaScript，就无法使默认的可聚焦HTML元素成为不可聚焦的HTML元素。

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

    // 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进行调整。

使HTML元素不可聚焦

8 个答案: