当文档已有获焦元素时，如何为动态插入的textarea设置自动聚焦

控制台报错的核心原因：浏览器对autofocus属性的处理逻辑存在硬约束——只要文档在当前处理循环中检测到已经存在处于获焦状态的元素，就会直接拦截所有后续autofocus的自动聚焦请求，不会执行任何聚焦操作。

核心操作流程 #

完全放弃依赖autofocus属性实现动态元素的聚焦，按照固定顺序执行以下操作即可绕过限制：

• 先主动清除当前文档的聚焦状态：对当前获焦的document.activeElement执行blur()方法，解除浏览器的焦点拦截判断
• 完成动态textarea的DOM插入流程，确保元素已经挂载到页面文档树中
• 在DOM渲染完成的下一帧，手动调用textarea实例的focus()方法触发聚焦

可直接复用的示例代码 #

// 绑定触发插入textarea的按钮点击事件
const addBtn = document.querySelector('#your-trigger-btn');
addBtn.addEventListener('click', () => {
  // 清除现有焦点，解除拦截
  if (document.activeElement instanceof HTMLElement) {
    document.activeElement.blur();
  }

  // 创建并插入textarea
  const targetTextarea = document.createElement('textarea');
  document.querySelector('#textarea-container').appendChild(targetTextarea);

  // 对齐渲染节奏触发聚焦，避免时机过早失效
  requestAnimationFrame(() => {
    targetTextarea.focus();
    // 可选：将光标定位到文本末尾
    targetTextarea.setSelectionRange(
      targetTextarea.value.length,
      targetTextarea.value.length
    );
  });
})

常见踩坑提醒 #

• 不要在元素插入DOM之前调用focus()，浏览器会直接忽略所有针对未挂载元素的聚焦请求
• 检查textarea本身的状态：如果元素带有disabled、hidden属性，或是被CSS设置为display: none、visibility: hidden，聚焦操作会直接失败，需要先移除对应的限制
• 不需要给textarea强行加autofocus属性：这个属性仅适用于页面初始加载阶段的输入框聚焦场景，动态交互场景下加了也会被拦截，没有实际作用

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