Question

问题：如果当前activeElement为input#1，则在按Tab键时它会跳转到input#2，但我想防止整个div[tabindex=-1]带有子项专注。

<div>
  <input id="1" type="text"> // jump from here
  <div tabindex="-1">
    <input id="2" type="text">
    <input id="3" type="text">
  </div>
</div>

<button>any focusable element</button> // to here

如果下一个可聚焦元素未知，如何实现？

Answer 1

您可以将其用于此contenteditable属性，然后在失去焦点后将其禁用

function edit(e){
  e.target.setAttribute("contenteditable",true);
}

function unedit(e){
  e.target.setAttribute("contenteditable",false);
}

[].slice.call( document.querySelectorAll(".unselect > div"),0).forEach((el)=>{
  el.addEventListener("click",edit);
  el.addEventListener("blur",unedit);
})

<div>
  <input id="1" type="text"> // jump from here
  <div tabindex="-1" class="unselect">
    <div id="2" >editable</div>
    <div id="3" >editable</div>
  </div>
    <input id="4" type="text"> // jump from here
</div>

避免将整个节点集中在孩子身上

1 个答案: