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

时间:2018-12-29 09:02:57

标签: javascript dom focus preventdefault

问题:如果当前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

如果下一个可聚焦元素未知,如何实现?

1 个答案:

答案 0 :(得分:0)

您可以将其用于此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>