原生 alert() 无法嵌入表单或输入控件，所谓“带输入的警告框”实为自定义 DOM 模拟；推荐使用语义化且功能完备的 元素实现可输入模态框，支持表单嵌入、焦点管理与无障碍访问。
警告对话框不能嵌入表单，alert() 本身不支持任何 HTML 或输入控件
浏览器原生的 alert() 是阻塞式纯文本提示，连换行都只能靠 \n，更别说放 <input> 或按钮。你看到的“带输入的警告框”，实际是自定义 DOM 元素模拟的——不是 alert()，也不是 confirm() 或 prompt()（后者虽能输文本但样式死板、移动端兼容差、无法定制字段）。
用 dialog 元素实现可输入的模态框最轻量且语义正确
现代浏览器（Chrome 98+、Firefox 97+、Safari 15.4+）已原生支持 <dialog></dialog>，它天然具备模态行为、焦点管理、ESC 关闭、Backdrop 遮罩，且完全允许嵌入表单控件：
<dialog id="inputDialog">
<form method="dialog">
<label>用户名：<input name="username" required></label>
<button type="submit">确定</button>
<button type="button" onclick="this.closest('dialog').close()">取消</button>
</form>
</dialog>
<button onclick="document.getElementById('inputDialog').showModal()">打开输入框</button>
关键点：
-
method="dialog"让提交按钮自动关闭对话框并把表单值作为returnValue返回 -
showModal()触发后，页面其余部分自动失焦，键盘 Tab 仅在对话框内循环 - 不支持
<dialog></dialog>的旧浏览器需 fallback 到div+ 手动控制display和aria-modal
prompt() 虽能输入但严重不推荐用于生产环境
尽管 prompt("请输入邮箱：") 看似满足“警告+输入”需求，但它有硬伤：
立即学习“前端免费学习笔记（深入）”；
- 样式完全不可控，iOS Safari 中字体小、无圆角、输入框紧贴文字
- 无法添加校验逻辑（比如邮箱格式检查），只能靠 JS 后置判断，用户体验割裂
- 部分浏览器（如新版 Firefox）默认禁用
prompt()在非用户手势触发的上下文中调用 - 返回值是字符串，无法获取多个字段或复选状态
表单数据获取和后续处理要绑定在 close 事件上
用 <dialog></dialog> 时，不要监听 submit，而应监听 close 事件——因为 method="dialog" 提交后对话框才真正关闭，此时才能安全读取 returnValue：
const dialog = document.getElementById('inputDialog');
dialog.addEventListener('close', () => {
if (dialog.returnValue === 'confirm') {
const formData = new FormData(dialog.querySelector('form'));
const username = formData.get('username');
console.log('收到输入：', username);
}
});
注意：returnValue 默认为空字符串，只有显式设置 dialog.close('confirm') 或表单提交才会赋值；若用户点遮罩层或按 ESC 关闭，returnValue 仍为空，需按需处理。
真实项目里最容易漏掉的是焦点重置——对话框关闭后，焦点应手动移回触发按钮或主内容区，否则屏幕阅读器用户会迷失。这不是“锦上添花”，而是可访问性的基本要求。
