将元素添加到页面时防止输入焦点答案

【问题标题】：Prevent input focus when an element is added to the page将元素添加到页面时防止输入焦点
【发布时间】：2022-07-06 04:10:57
【问题描述】：

我有一个 html <dialog> 标记，其中包含一个文本字段。但是当对话框打开时，文本字段立即获得焦点。这在桌面设备上很好，但在移动设备上这会导致虚拟键盘弹出。

有没有办法防止文本字段获得焦点？请注意，我仍然希望用户能够在对话框可见后集中注意力。

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

【问题讨论】：

标签： javascript html css focus virtual-keyboard

【解决方案1】：

似乎一种方法是创建文本字段disabled，然后在对话框可见后再次启用它。不知道有没有比这更优雅的方式。

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

【讨论】：