输入数据到下次输入时怎么办？

Question

当输入数据到下一个输入时，如果我删除数据，它会返回到输入，该怎么办？<input id="first" maxlength="1" value=""> <input id="second" maxlength="1" value=""> <input id="third" maxlength="1" value="">

Answer 1

专注于第一个空输入非常容易，但是当输入为空时自动向后移动感觉违反直觉......如果您愿意，您可以添加一个键盘处理程序来查看用户是否在空输入中输入退格键；如果是，请将焦点移回。

也就是说，使用三个输入框而不是一个的原因是什么？:)

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="">