使用jQuery实现按下Enter键后聚焦下一个输入框的问题排查

首先咱们先揪出你代码里的核心问题：你把keyup事件绑定在了.address_field这个div容器上，而不是输入框本身！这就导致触发事件时this指向的是div，不是输入框——div默认是不能被聚焦的，所以你后续尝试聚焦div肯定无效，而且索引计算也会跟着出错。

再说说你控制台测试里的那些“异常”：

• 像$('.address_field>input')[0].focus()返回undefined是正常的！原生DOM元素的focus()方法本身就没有返回值，不代表聚焦操作没生效，你得看页面上输入框有没有光标来判断，别盯着返回值纠结~
• $('.address_field').eq(1).focus()无效是因为div默认没有聚焦能力，除非你给它加tabindex属性，但咱们根本不需要聚焦div啊，目标是输入框！
• 你说$('.address_field input[type=text]')[next_inbox_index].focus()看似有效，其实是因为这个选择器终于选中了输入框，但可能因为原代码的索引计算错误（基于div的索引而非输入框），导致偶尔生效偶尔不生效。

修正后的代码 #

直接把事件绑定到输入框上，然后基于输入框的集合计算索引，就能解决问题：

$('.add_address_section').on('keyup', '.add_address_field', function (e) {
  if (e.keyCode === 13) {
    e.preventDefault(); // 阻止默认的Enter提交行为
    
    // 获取当前输入框在所有输入框中的索引
    const currentInputIndex = $('.add_address_field').index(this);
    // 执行添加新输入框的方法
    addInputField();
    
    // 计算下一个输入框的索引：如果当前是最后一个，新添加的就是currentInputIndex + 1
    const nextInputIndex = currentInputIndex + 1;
    // 获取下一个输入框的jQuery对象
    const nextInput = $('.add_address_field').eq(nextInputIndex);
    
    // 确保下一个输入框存在的情况下再聚焦
    if (nextInput.length > 0) {
      nextInput.focus();
    }
  }
});

关键修正点说明 #

1. 事件绑定目标修正：把事件绑定到.add_address_field输入框上，这样this就指向当前触发事件的输入框，索引计算才准确。
2. 基于输入框集合计算索引：用$('.add_address_field').index(this)获取当前输入框在所有输入框中的位置，而不是基于div容器的索引。
3. 判断元素存在性：添加nextInput.length判断，避免当用户在最后一个输入框按Enter时，尝试聚焦不存在的元素。
4. 忽略focus()返回值：以后别再用focus()的返回值判断是否生效了，原生DOM的focus()就是返回undefined，jQuery的.focus()会返回jQuery对象，看页面光标才是最直接的验证方式！

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