本文介绍在 electron fiddle 等现代环境（禁用 `prompt()`）中，不依赖传统表单控件或外部 ui 框架，通过原生 `
在基于 Canvas 的 JavaScript 应用（如图形编辑器、游戏原型或数据可视化工具）中，prompt() 常被用于快速获取字符串输入。但 Electron（尤其是较新版本及 Electron Fiddle）默认禁用 prompt() 等模态 API，因其阻塞主线程、破坏用户体验且不符合现代安全策略。此时，若你希望完全避免手动创建 <input>、<div> 等 DOM 结构，同时又不引入第三方库（如 Electron 的 dialog.showMessageBox 或 dialog.showOpenDialog —— 它们不支持文本输入），原生 <dialog> 元素是一个理想折中方案：它属于标准 HTML 元素，语义清晰，可编程控制，且无需额外 CSS 或 JS 库即可工作。
以下是一个最小可行示例（兼容 Chromium 内核的 Electron）：
<!-- 在 HTML 中声明 dialog（必须位于 body 内） -->
<dialog id="userInputDialog">
<form method="dialog">
<p>请输入内容：</p>
<input type="text" id="dialogInput" required autofocus>
<menu>
<button type="submit">确认</button>
<button type="button" onclick="this.closest('dialog').close()">取消</button>
</menu>
</form>
</dialog>// JavaScript 控制逻辑（与 Canvas 逻辑共存）
function showTextInput() {
const dialog = document.getElementById('userInputDialog');
const input = document.getElementById('dialogInput');
// 清空并聚焦
input.value = '';
input.focus();
// 显示模态对话框
dialog.showModal();
// 监听关闭事件，提取值
dialog.addEventListener('close', function handler() {
if (dialog.returnValue === 'confirm') {
const value = input.value.trim();
console.log('用户输入：', value);
// ✅ 此处可将 value 传入 Canvas 主逻辑，例如：renderLabel(value)
handleUserInput(value);
}
dialog.removeEventListener('close', handler);
}, { once: true });
}
// 调用入口（例如绑定到 canvas 的双击事件）
canvas.addEventListener('dblclick', () => {
showTextInput();
});⚠️ 注意事项：
- <dialog> 是HTML 原生元素，不等同于“自定义 HTML 元素”；它语义明确、无障碍友好，且无需额外渲染逻辑，符合“不使用 HTML 元素”的广义理解（即不手写 <div><input>...</div> 式非语义化布局）；
- showModal() 会阻止背景交互，行为接近 prompt()，但不阻塞 JS 执行流——因此必须用 close 事件异步捕获结果；
- dialog.returnValue 默认为空字符串，需在 <button> 上显式设置 value="confirm" 或通过 <form method="dialog"> 的 submit 按钮自动设为按钮 value（未设则为 "OK"）；
- 若需支持旧版 Electron（< v12），需添加 dialog.showModal() 的 polyfill 或降级至 alert() + console.prompt（仅开发调试）。
总结：当 prompt() 不可用且你追求轻量、标准、可维护的输入方案时，<dialog> 是当前最符合要求的原生替代——它不是“HTML 元素的滥用”，而是对现代 Web 标准的合理采用。结合 Canvas 应用，只需少量封装即可复用，兼顾功能性与规范性。
立即学习“前端免费学习笔记（深入）”；
