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

如何解决将输入字段填充到下一个输入后更改光标焦点

我正在一个项目中，在该项目中，我使用JavaScript使用maxlength = "1"创建随机数的输入字段，并且当用户用一个字母填充所有输入字段时，会出现一个提交按钮。 问题是，当填充一个字段时，我希望光标移动到下一个输入字段。我正在尝试通过eventlistener事件将onkeyup添加到我的输入元素中。但是，当我在代码中实现此功能时，光标移动功能不起作用，并且当我检查我的页面时，没有看到错误。

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

非常感谢您的帮助。谢谢你。

解决方法

尝试使用"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();

          }
    });

,

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

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

然后获得下一个输入元素

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

,

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变量，代码将更具可读性

祝您编程愉快！