如何在无 HTML 元素限制下替代已弃用的 prompt() 实现用户输入

以下是一个最小可行示例（兼容 Chromium 内核的 Electron）：

   
     
请输入内容：
                 确认       取消        
 

// 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(); });

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• 是HTML 原生元素，不等同于“自定义 HTML 元素”；它语义明确、无障碍友好，且无需额外渲染逻辑，符合“不使用 HTML 元素”的广义理解（即不手写

  …

  式非语义化布局）；

• showModal() 会阻止背景交互，行为接近 prompt()，但不阻塞 JS 执行流——因此必须用 close 事件异步捕获结果；
• dialog.returnValue 默认为空字符串，需在 上显式设置 value=”confirm” 或通过
  
  的 submit 按钮自动设为按钮 value（未设则为 “OK”）；

• 若需支持旧版 Electron（

总结：当 prompt() 不可用且你追求轻量、标准、可维护的输入方案时，