HTML input 实现回车切换到下一个输入框功能

要在HTML中实现按下回车键时切换到下一个输入框的功能，可以为每个input元素添加keydown事件监听器，并在事件处理函数中检查按键是否为回车键（Enter），如果是，则使用document.activeElement.tabIndex获取当前激活输入框的索引，并通过设置tabIndex来切换到下一个输入框。

以下是实现这一功能的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enter to Tab Example</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有的输入框
    var inputs = document.querySelectorAll('input');
 
    // 为每个输入框添加事件监听器
    inputs.forEach(function(input) {
        input.addEventListener('keydown', function(event) {
            // 检查按键是否为回车键
            if (event.key === 'Enter') {
                // 阻止默认行为，防止提交表单
                event.preventDefault();
 
                // 获取当前输入框的tabIndex
                var tabIndex = parseInt(input.getAttribute('tabindex'));
 
                // 查找下一个输入框
                var nextInput = document.querySelector('[tabindex="' + (tabIndex + 1) + '"]');
 
                // 如果下一个输入框存在，将其设置为焦点
                if (nextInput) {
                    nextInput.focus();
                }
            }
        });
    });
});
</script>
</head>
<body>
 
<form>
    <input type="text" tabindex="1" placeholder="Input 1">
    <input type="text" tabindex="2" placeholder="Input 2">
    <input type="text" tabindex="3" placeholder="Input 3">
    <!-- 其他输入框... -->
</form>
 
</body>
</html>

在这个示例中，我们为所有input元素添加了keydown事件监听器，并在事件处理函数中进行了回车键检查。如果检测到回车键，我们就获取当前元素的tabIndex并寻找下一个tabIndex的元素，然后使用focus()方法将焦点设置到该元素上。这里假设所有输入框的tabIndex是连续的，这样我们可以通过tabIndex值来查找下一个输入框。

HTML input 实现回车切换到下一个输入框功能

评论已关闭

推荐阅读