如何实现按下Enter键时聚焦下一个输入框（适配动态增删输入字段场景）

没问题，这需求很实用，我帮你调整代码实现功能。下面是完整的修改后代码，我会在后面说明关键改动点：

完整代码 #

<html>
<head>
<title>Dynamically Add or Remove input fields in PHP with JQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
<script>
$(document).ready(function(){
    var i=1;
    // 页面加载完成后自动聚焦第一个输入框
    $('.name_list').first().focus();

    $('#add').click(function(){
        i++;
        $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
        // 新增输入框后自动聚焦到它
        $('#row'+i+' .name_list').focus();
    });

    $(document).on('click', '.btn_remove', function(){
        var button_id = $(this).attr("id");
        $('#row'+button_id+'').remove();
    });

    // 绑定Enter键事件，实现跳转到下一个输入框
    $(document).on('keydown', '.name_list', function(e) {
        // 判断是否按下Enter键（keyCode 13）
        if(e.keyCode === 13) {
            e.preventDefault(); // 阻止默认的表单提交行为
            // 获取当前输入框的下一个同级输入框
            var nextInput = $(this).closest('tr').next('tr').find('.name_list');
            // 如果存在下一个输入框，就聚焦它
            if(nextInput.length > 0) {
                nextInput.focus();
            } else {
                // 如果是最后一个输入框，聚焦到添加按钮（可根据需求修改）
                $('#add').focus();
            }
        }
    });

    $('#submit').click(function(){
        $.ajax({
            url:"name.php",
            method:"POST",
            data:$('#add_name').serialize(),
            success:function(data) {
                alert(data);
                $('#add_name')[0].reset();
                // 重置后重新聚焦第一个输入框
                $('.name_list').first().focus();
            }
        });
    });
});
</script>
</body>
</html>

关键改动说明 #

• 页面加载自动聚焦：在页面初始化完成后，直接让第一个输入框获得焦点，省去用户手动点击的步骤。
• 新增输入框自动聚焦：点击添加按钮后，自动把光标定位到新生成的输入框里，提升输入流畅度。
• Enter键跳转逻辑：通过事件委托给所有输入框绑定按键事件，按下Enter时：
  • 先阻止默认的表单提交行为，避免页面意外刷新；
  • 查找当前输入框的下一个同级输入框，如果存在就聚焦过去；
  • 如果已经是最后一个输入框，默认聚焦到添加按钮，你也可以根据需求改成聚焦提交按钮或者保持当前焦点。
• 提交后重置聚焦：表单提交并重置后，重新聚焦到第一个输入框，方便用户再次开始输入。

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