Предотвратить фокусировку целого узла с детьми - PullRequest
Новая
       24

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

0 голосов
/ 29 декабря 2018

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

вы можете использовать для этого атрибута 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>
...