javascript - 将输入字段填充到下一个输入后更改光标焦点

Question

我正在做一个项目，我使用javascript创建随机数量的输入字段，maxlength = "1"当用户用一个字母填写所有输入字段时，每个提交按钮都会出现。问题是当一个字段被填充时，我希望光标移动到下一个输入字段。我正在尝试使用eventlistenerwithonkeyup事件将此功能添加到我的输入元素中。但是，当我在代码中实现这一点时，光标移动功能不起作用，当我检查我的页面时，我没有看到任何错误。

我的代码： https ://jsfiddle.net/bill_sk/2t7vLc5y/2/

感谢您对此的帮助。先感谢您 。

Answer 1

inputLists.forEach(input => {
        input.addEventListener("keyup", ()=>{
        if(input.value.length === input.maxLength && parseInt(input.id) < inputLists.length) {
                  document.getElementById(parseInt(input.id)+1).focus();
        }
      })

• input.id 会给你一个字符串，所以你必须将它解析为 int。
• 事件应该是“keyup”，而不是“onkeyup”
• 当您想在 for 循环中向下一个元素添加内容时，请始终注意数组中的最后一个元素
• 使用您在函数顶部初始化的 inputList 变量，代码将更具可读性

快乐编码！

Answer 2

首先你需要听keyup事件而不是onkeyup事件

elem.addEventListener("keyup" , evt => {

然后像这样获取下一个输入元素

let el = document.getElementById(parseInt(elem.id) +1).focus();

Answer 3

尝试"keyup"代替"onkeyup". 如果您正在处理这样的事情，请始终尝试找出代码的哪一部分无法使用console.log() 还有其他一些错误，但这有效

elem.addEventListener("keyup" , evt => {
                
          elem = evt.target
          if(elem.value.length >= elem.maxLength){
              let el = document.getElementById(parseInt(elem.id) +1)
              el.focus();

          }
    });