原生 alert() 无法响应 Esc 键，因其为浏览器 UI 层阻塞式模态框，JavaScript 完全失权；替代方案是使用自定义 DOM 弹窗并监听 document 的 keydown 事件判断 Escape 键。
原生 alert() 无法拦截 Esc 键，也不能自定义行为——它压根不响应键盘事件，包括 Esc、Enter 或任何按键。
为什么 alert() 按 Esc 没反应
浏览器对 alert() 的实现是阻塞式模态对话框，由操作系统或浏览器 UI 层直接接管。JavaScript 完全失去控制权，document.addEventListener('keydown', ...) 或 onkeydown 在其弹出期间完全不触发。这不是 bug，是规范行为。
常见错误现象：
• 绑定了 keydown 监听器，但 Esc 按下时毫无输出
• 尝试在 alert() 后立即执行代码，结果仍被阻塞，无法“抢在关闭前做点什么”
替代方案：用 confirm() 或自定义 DOM 对话框
confirm() 同样不可控 Esc 键，但它至少返回布尔值，可配合逻辑判断；真正可控的只有自己写的 DOM 弹窗。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 如果只是想“按 Esc 关闭”，必须放弃
alert()，改用div+position: fixed模拟 - 监听
document的keydown，检查e.key === 'Escape'，再调用隐藏函数 - 记得在弹窗显示时
document.body.style.overflow = 'hidden'，避免背景滚动 - 务必调用
e.preventDefault()仅当需要阻止默认行为（如 Esc 触发浏览器全屏退出），对弹窗本身无需 prevent
最小可用自定义警告框示例
以下代码可直接运行，支持 Esc 关闭、点击遮罩层关闭、点击按钮关闭：
<div id="alert-box" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:20px; border-radius:4px;">
<p id="alert-text">警告内容</p>
<button onclick="closeAlert()">确定</button>
</div>
</div>
<script>
function showAlert(msg) {
document.getElementById('alert-text').textContent = msg;
document.getElementById('alert-box').style.display = 'block';
document.addEventListener('keydown', handleEsc);
}
function closeAlert() {
document.getElementById('alert-box').style.display = 'none';
document.removeEventListener('keydown', handleEsc);
}
function handleEsc(e) {
if (e.key === 'Escape') closeAlert();
}
</script>
注意：该示例未处理焦点管理（如 Esc 后焦点回退到触发按钮），也未适配屏幕阅读器——真实项目中这些才是让“Esc 可关闭”真正可用的关键点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
