使用jQuery动态添加输入框后焦点无法跳转的问题求助

我来帮你搞定这个焦点问题！你现在的代码能成功添加输入字段，但没给新创建的输入框设置焦点，而且回车的默认行为也没阻止，这就导致焦点没法自动转移到新输入框上。咱们来修改一下代码：

修改后的完整代码 #

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  // 给父元素绑定keypress事件（事件委托，兼容动态添加的输入框）
  $(scntDiv).on('keypress', 'input[type="text"]', function(event) {
    // 只处理回车键
    if (event.which === 13) {
      // 阻止回车的默认行为（比如表单提交、页面刷新）
      event.preventDefault();

      // 创建新的输入字段容器
      var newInput = $(`<p>
        <label for="p_scnt_${i}">
          <input type="text" id="p_scnt_${i}" size="20" name="p_scnt_${i}" value="" placeholder="Input Value" />
        </label>
        <a href="#" class="remScnt">Remove</a>
      </p>`);

      // 添加到容器中
      scntDiv.append(newInput);

      // 让新添加的输入框立即获得焦点
      newInput.find('input').focus();

      // 递增计数
      i++;
    }
  });

  // 处理删除按钮的事件（事件委托，因为按钮是动态添加的）
  $(scntDiv).on('click', '.remScnt', function(event) {
    event.preventDefault();
    // 只在有多个输入框时允许删除
    if (i > 2) {
      $(this).closest('p').remove();
      i--;
    }
  });
});

关键修改点说明 #

• 事件委托优化：把keypress事件绑定到父容器scntDiv上，监听内部的输入框，这样动态添加的输入框也能触发回车事件，原代码直接绑定在父容器上会监听所有按键，现在更精准。
• 阻止默认行为：添加event.preventDefault()，避免回车触发表单提交或页面刷新，确保焦点能正常转移。
• 设置焦点：新输入框添加到DOM后，用.find('input').focus()让它立即获得焦点，这就是你之前缺失的关键步骤！
• 删除按钮优化：用类名.remScnt代替ID（ID不能重复），并通过事件委托绑定点击事件，确保动态添加的删除按钮能正常工作。

这样修改后，你按回车添加新输入框时，焦点会自动跳到新的输入框里，完美解决你的问题~

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