Как я могу изменить фокус, как только наберу что-нибудь?

Question

Я пытаюсь создать кроссворд и хотел бы, чтобы фокус переместился на следующее поле, как только я что-то наберу в поле. Я также хочу сделать это go задом наперед, когда я удаляю. По сути, я хочу, чтобы каждый из этих двух разделов, разделенных этим черным ящиком, действовал аналогично вводу одного текста.

.row {
    display: flex;
    margin-left: 1.2em;
}

input[type="text"] {
    width: 1em;
    height: 1em;
    font: 700 2em Chiller;
    text-align: center;
    vertical-align: middle;
    padding: 1px;
    margin: -1px;
    text-transform: capitalize;
    border: 2px solid black;
}

<div class="row">
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="0" autocomplete="off" style="background-color:black"/>
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
        </div>

Answer 1

вы можете добавить eventListenr к каждому входу, а затем обрабатывать сфокусированный элемент. измените элемент черного ящика на div и задайте нужные свойства.

document.querySelectorAll(

var nodes_input=document.querySelectorAll(".row input");
for(let i=0;i<nodes_input.length;i++){
  nodes_input[i].addEventListener("keyup", ()=>{switch_next(event,i)});
}
function switch_next(ev,i){
  let k=ev.which,n=false;
  if(k>64&&k<91){
    n=Math.min(nodes_input.length-1,++i);
    ev.target.value=ev.key;
  }else{ 
    ev.target.value="";
    if(k==8){
      n=Math.max(0,--i);
    }else{
    
    }
  }
  if(n!==false){
   nodes_input[n].focus();
  }
}

.row {
    display: flex;
    margin-left: 1.2em;
}

input[type="text"],.black-box {
    width: 1em;
    height: 1em;
    font: 700 2em Chiller;
    text-align: center;
    vertical-align: middle;
    padding: 1px;
    margin: -1px;
    text-transform: capitalize;
    border: 2px solid black;
}
.black-box{
  background-color:black;
}

<div class="row">
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <div type="text" maxlength="0" autocomplete="off" class="black-box"></div>
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
            <input type="text" maxlength="1" autocomplete="off" />
        </div>

)

Answer 2

Имейте go с этим

Я перехожу к следующему ряду в конце ряда

Я позволю вам исправить предысторию на 8 самостоятельно - это не тривиально. Мой код ниже не обрабатывает это прямо сейчас

const findPrev = tgt => {
  let prev = tgt.previousElementSibling;
  if (prev) {
    if (prev.maxLength === 0) prev = findPrev(prev);
  } else {
    const parent = tgt.closest("div");
    if (parent.previousElementSibling && parent.previousElementSibling.classList.contains("row")) {
      prev = parent.previousElementSibling.querySelector("input:last-child");
      while (prev && prev.maxLength === 0) prev = findPrev(prev);
    }
  }
  return prev; // can be undefined
};


const findNext = tgt => {
  let next = tgt.nextElementSibling;
  if (next) {
    if (next.maxLength === 0) next = findNext(next);
  } else {
    const parent = tgt.closest("div");
    if (parent.nextElementSibling && parent.nextElementSibling.classList.contains("row")) {
      next = parent.nextElementSibling.querySelector("input");
      while (next && next.maxLength === 0) next = findNext(next);
    }
  }
  return next; // can be undefined
};
window.addEventListener("load", function() {
  let bs = false
  document.getElementById("crosswords").addEventListener("keydown", function(e) {
    if (e.which === 8) bs=true
  })
  document.getElementById("crosswords").addEventListener("input", function(e) {  
    const tgt = e.target;
    
    if (tgt.tagName === "INPUT" && tgt.type === "text") {
      let letter = bs ? findPrev(tgt) : findNext(tgt);
      if (letter) {
        letter.focus()
        letter.select()
      }
    }
    bs=false;
  });
})

.row {
  display: flex;
  margin-left: 1.2em;
}

input[type="text"] {
  width: 1em;
  height: 1em;
  font: 700 2em Chiller;
  text-align: center;
  vertical-align: middle;
  padding: 1px;
  margin: -1px;
  text-transform: capitalize;
  border: 2px solid black;
}

<div id="crosswords">
  <div class="row">
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="0" autocomplete="off" style="background-color:black" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
  </div>
  <div class="row">
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="0" autocomplete="off" style="background-color:black" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="0" autocomplete="off" style="background-color:black" />
  </div>
  <div class="row">
    <input type="text" maxlength="0" autocomplete="off" style="background-color:black" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
    <input type="text" maxlength="1" autocomplete="off" />
  </div>
</div>