Question

假设我们有一个DOM：

...
<div>
  // child nodes
</div>
<div id="needsToNotBeFocusable"> 
  // child nodes 
</div>
...

有没有办法使<div id="needsToNotBeFocusable">及其子节点无法聚焦？

在每个子节点上设置tabindex="-1"将破坏现有的tabindexes。

Answer 1

首先，在“无法通过Tab键聚焦”和“从不聚焦（通过编程，单击或通过选项卡）”之间有区别。前者是通过设置tabindex="-1"属性来实现的，后者是通过添加disabled属性来实现的。

input {display:block}

<input>
<input>
disabled: <input disabled>
tab -1: <input tabindex="-1">
<input>
<input>

在每个子节点上设置tabindex =“-1”将破坏现有的tabindexes。

我不明白你的意思。对于无法集中标签的元素，如何破坏tabindex？

是否有一种方法可以使子节点无法聚焦？

Div无法正常聚焦（尽管它们可以滚动到）。但是，使其子对象无法集中注意力只需要迭代其子对象（可能有多个层次）并设置tabindex或disabled。

let recursiveUnfocusable = el => {
  el.disabled = true;
  [...el.children].forEach(recursiveUnfocusable);
};

let div = document.querySelector('#needsToNotBeFocusable');
recursiveUnfocusable(div);

...
<div>
  <input><input><input>
</div>
<div id="needsToNotBeFocusable"> 
  <input><input><input>
  <div>
    <input><input><input>
  </div>
</div>
...

Answer 2

您可能想使用数据属性来保存选项卡索引并在启用它时对其进行设置。

document.querySelector("#inp1").addEventListener("input", function() {
  var enabled = this.value.length > 0
  document.querySelectorAll("#needsToNotBeFocusable [data-index]").forEach(function(elem) {
    elem.tabIndex = enabled ? elem.dataset.index : -1
  })
})

<div>
  <input id="inp1" tabIndex="1" placeholder="tab 1" />
</div>
<div id="needsToNotBeFocusable">
  <input data-index="2" tabIndex="-1" placeholder="tab 2" />
  <input data-index="5" tabIndex="-1" placeholder="tab 5" />
  <input data-index="3" tabIndex="-1" placeholder="tab 3" />
  <input data-index="6" tabIndex="-1" placeholder="tab 6" />
  <input data-index="4" tabIndex="-1" placeholder="tab 4" />
</div>
<input tabIndex="7" placeholder="tab 7"/>

有没有办法禁用对div及其子节点的关注？

2 个答案: