输入数据到下一个输入时怎么办？

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