时间戳

首页 > 解决方案 > 输入数据到下一个输入时怎么办？

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

问题描述

将数据输入到下一个输入时怎么办，如果我删除数据，它会返回到输入？

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

标签： javascripthtmljquery

解决方案

专注于第一个空输入很容易，但是当输入清空时自动向后移动感觉违反直觉......如果需要，您可以添加一个 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="">

推荐阅读