Предотвратить фокусировку целого узла с детьми

Question

Проблема: если текущий активный элемент 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>