JavaScript按Enter键实现输入框光标循环跳转的问题排查

核心疑问解答 #

• 不需要为按钮添加事件监听器。该交互的触发条件是输入框聚焦时按下回车键，直接给输入框绑定键盘事件即可，和按钮无关。
• 输入框事件绑定直接在DOM加载完成后，通过选择器拿到所有目标输入框批量绑定即可，不需要在HTML标签上写内联事件属性。

原有代码运行异常的原因 #

1. 脚本执行时机错误：绑定事件的脚本放在了输入框元素之前，运行时页面还未渲染出输入框，获取到的输入框节点为空，事件根本没有绑定成功。
2. 缺少循环跳转逻辑：原有代码判断下一个输入框不存在时就终止执行，没有做最后一个输入框跳回第一个的处理。
3. 存在无效代码：func函数中调用了未定义的mvCursor()方法，会触发JS报错阻断后续逻辑。
4. 未阻止默认行为：输入框按下回车键时浏览器有默认提交行为，会干扰跳转逻辑执行。

可直接运行的修正代码 #

1. 删除原来写在body开头的那段绑定回车事件的script块，删除func()函数里的mvCursor();这行无效代码。
2. 在</body>标签前添加如下脚本：

document.addEventListener('DOMContentLoaded', () => {
    // 获取所有文本输入框，转为数组方便索引计算
    const inputList = Array.from(document.querySelectorAll('input[type="text"]'));
    inputList.forEach((currentInput, currentIndex) => {
        currentInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                // 阻止回车默认提交行为
                e.preventDefault();
                // 取模计算下一个输入框索引，最后一个自动回到第一个
                const nextIndex = (currentIndex + 1) % inputList.length;
                const nextInput = inputList[nextIndex];
                nextInput.focus();
                // 自动选中输入框内容，可直接输入覆盖
                nextInput.select();
            }
        })
    })
})

实现效果 #

• 任意输入框按下回车键，光标直接跳转到下一个输入框
• 最后一个输入框按下回车键，光标自动回到第一个输入框，形成无限循环
• 原有func()函数的词义拼接、清空输入框逻辑不受影响，清空后光标会自动按规则落到对应输入框

内容的提问来源于stack exchange，提问作者yaseen wazir