如何阻止文本元素在变为可见时自动获取焦点

原生<dialog>调用showModal()打开时，浏览器遵循规范会自动将焦点移动到弹窗内部第一个可聚焦的交互元素上。如果第一个可聚焦元素是文本输入类控件，移动端会直接检测到聚焦状态唤起虚拟键盘，打断用户浏览弹窗内容的流程，且需求要求保留弹窗渲染完成后，用户手动点击输入框正常聚焦唤起键盘的能力。

原始复现代码：

<dialog id="myDialog">
  Say something nice:
  <input type="text">
</dialog>
<button onclick="myDialog.showModal()">Open</button>

以下两种方案均可实现拦截打开瞬间的自动聚焦，且不破坏后续输入框的正常交互：

方案1：前置隐藏的兜底聚焦元素 #

在dialog内部最顶部插入一个无视觉呈现、不响应交互、不进入Tab导航流的可聚焦元素，让浏览器默认的自动聚焦行为落在这个元素上，不会触发输入框聚焦。
实现代码：

<dialog id="myDialog">
  <!-- 仅用于承接默认焦点，无实际交互意义 -->
  <button tabindex="-1" style="position:absolute; opacity:0; pointer-events:none; width:0; height:0; border:none; margin:0; padding:0;"></button>
  Say something nice:
  <input type="text">
</dialog>
<button onclick="myDialog.showModal()">Open</button>

• tabindex="-1"保证该元素不会被Tab键遍历到，不影响无障碍导航逻辑
• 所有样式设置确保元素完全不可见、不占用布局空间、不拦截任何用户点击操作

方案2：打开弹窗后主动将焦点绑定到弹窗根元素 #

给dialog标签添加tabindex="-1"属性，允许JS对其设置焦点，在调用showModal()后立刻执行焦点转移，覆盖浏览器默认的聚焦逻辑。
实现代码：

<dialog id="myDialog" tabindex="-1">
  Say something nice:
  <input type="text">
</dialog>
<button id="openBtn">Open</button>

<script>
const dialog = document.getElementById('myDialog');
document.getElementById('openBtn').addEventListener('click', () => {
  dialog.showModal();
  // 主动将焦点移到弹窗本身，拦截输入框自动聚焦
  dialog.focus();
});
</script>

以下方案存在明显缺陷，不推荐使用：

• 初始给输入框加disabled/readonly属性，弹窗打开后延时移除：需要额外维护状态逻辑，延时时间在不同性能的设备上表现不一致，容易出现交互异常
• 弹窗打开时给输入框调用blur()：不同浏览器触发默认自动聚焦的时机不统一，经常出现blur执行早于浏览器自动聚焦的情况，完全无法稳定拦截

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