如何在JavaScript中实现新增Exercise输入框时自动跳转聚焦？

这个问题很好解决，我们只需要在新增Exercise块并添加到DOM后，主动找到对应的输入框进行聚焦，再触发页面滚动到该元素位置即可。具体实现步骤如下：

1. 修改添加按钮的点击事件逻辑 #

在你现有的addOpdracht点击事件中，添加对新生成块的聚焦和滚动操作：

$(document).ready(function() { 
  var id = 0; 
  var addOpdracht = $('<a/>', { 
    'class': 'btn btn-success', 
    'id': 'addOpdracht' 
  }).on('click', function() { 
    // 1. 生成新的Exercise块并添加到表单
    var newExerciseBlock = getExerciseBlock(id);
    $('form').append(newExerciseBlock);
    id++;

    // 2. 找到当前块中的Exercise输入框
    var targetInput = $(newExerciseBlock).find('.exerciseGetWordInput');
    
    // 3. 聚焦输入框
    targetInput.focus();
    
    // 4. 滚动到该输入框位置（平滑滚动+居中显示）
    targetInput[0].scrollIntoView({
      behavior: 'smooth', // 平滑滚动，可选，去掉则是瞬间跳转
      block: 'center'     // 让元素在视口中居中，可选值还有'nearest'/'start'/'end'
    });
  }).html('<i class="fa fa-plus fa-2x"></i>'); 

  // 其余原有代码保持不变...
  $('form').append(addOpdracht); 
  $('form').append(getExerciseTitle()); 
})

2. 代码解释 #

• 为什么不用autofocus？：autofocus属性只有在页面初始加载时会生效一次，动态生成的元素添加这个属性不会自动触发聚焦，所以必须用JS主动调用focus()方法。
• scrollIntoView的作用：这是原生DOM API，能直接让目标元素滚动到浏览器视口内，通过参数可以控制滚动的平滑度和元素在视口中的位置，比手动计算scrollTop更简单可靠。
• 为什么要先append再操作？：只有当元素被添加到DOM树中后，我们才能正确找到它并进行聚焦、滚动操作。

3. 额外优化（可选） #

如果你希望滚动效果更贴合需求，可以调整scrollIntoView的参数：

• behavior: 'auto'：默认值，瞬间滚动到目标位置
• block: 'start'：让元素顶部对齐视口顶部
• block: 'end'：让元素底部对齐视口底部

这样每次点击添加按钮，新的Exercise输入框都会自动获得焦点，页面也会自动滚动到它的位置，完全不需要手动操作~

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