Как это сделать при вводе данных на следующий вход?

Question

Как это сделать при вводе данных на следующий вход, и если я удаляю данные, он возвращается на вход?

<input id="first" maxlength="1" value="">
<input id="second" maxlength="1" value="">
<input id="third" maxlength="1" value="">

Answer 1

Фокусировка на первом пустом вводе довольно проста, но автоматический возврат назад, когда ввод очищен, кажется нелогичным ... Если вы хотите, вы можете добавить обработчик keyup, смотрящий на то, вводит ли пользователь забой в пустой ввод; если они есть, переместите фокус назад.

Тем не менее, в чем причина использования трех блоков ввода вместо одного? :)

const inputs = document.querySelectorAll(".input-grouped");

function alwaysFocusFirstEmptyInput(event) {
  for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].value === "") {
      inputs[i].focus();
      break;
    }
  }
}

[...inputs].forEach((input) => {
  input.addEventListener("input", alwaysFocusFirstEmptyInput, null);
});

<input class="input-grouped" id="first" maxlength="1" value="">
<input class="input-grouped" id="second" maxlength="1" value="">
<input class="input-grouped" id="third" maxlength="1" value="">