如何让HTML弹窗打开时自动聚焦文本输入框无需点击？

要让弹窗打开后无需点击输入框就能直接输入，核心是在弹窗显示的同时，调用输入框的focus()方法让它自动获得焦点。

具体实现步骤 #

1. 获取DOM元素：先拿到弹窗容器和输入框的DOM节点
2. 在弹窗触发逻辑中添加聚焦操作：当通过快捷键触发弹窗显示时，先确保弹窗可见，再调用输入框的focus()方法

结合你的代码示例，完整JS实现 #

// 获取元素
const popupContainer = document.getElementById('popupContainer');
const annotateInput = document.getElementById('AnnotateLabel');

// 监听快捷键（示例：Ctrl+Shift+O 触发弹窗）
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.shiftKey && e.key === 'O') {
    e.preventDefault();
    // 显示弹窗（根据你的实际隐藏方式调整，比如移除hidden类或设置display）
    popupContainer.style.display = 'block';
    // 自动聚焦输入框
    annotateInput.focus();
  }
});

注意事项 #

• 如果弹窗是通过CSS类控制显示/隐藏（比如.hidden { display: none; }），替换显示逻辑为：

  popupContainer.classList.remove('hidden');
  annotateInput.focus();
  

• 如果弹窗带有过渡/动画效果，需要等待动画结束后再聚焦，避免失效：

  popupContainer.classList.remove('hidden');
  // 监听过渡结束事件，仅执行一次
  popupContainer.addEventListener('transitionend', () => {
    annotateInput.focus();
  }, { once: true });
  

• 确保输入框的autocomplete属性已设置为off（你的代码中已经设置），避免浏览器自动填充干扰聚焦状态

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