原生 prompt() 仅限用户点击直接调用，不可异步；自定义弹窗需用 div+input 实现样式与交互；现代方案推荐 +showmodal()，但需注意浏览器兼容性；第三方库虽便捷但可能造成过度设计。
点击按钮后动态创建 prompt 弹窗
浏览器原生只提供 alert、confirm、prompt 三种简单弹窗，其中 prompt 就是带输入框的。但它样式不可控、无法定制、在部分浏览器（如 Safari）中已被限制为仅响应用户手势触发——也就是说，必须是真实点击事件里调用，不能异步延迟或从定时器里触发。
常见错误现象：prompt() 在 Chrome 中点一次没反应，或返回 null；在 Safari 中直接静默失败；用 setTimeout(() => prompt(...), 0) 会失效。
- 确保调用写在
onclick或addEventListener('click', ...)的直接回调里 - 不要包装成 Promise 或 await 化，
prompt是同步阻塞的 - 返回值是字符串（用户输入内容）或
null（点取消或关闭），记得判空
示例：
<button onclick="const v = prompt('请输入姓名'); if (v !== null) console.log(v);">输入姓名</button>
用 HTML + CSS + JS 手动实现可定制文本框弹窗
想改样式、加校验、支持回车提交、或者嵌入富文本？就得自己画一个。核心思路是：用 div 模拟弹窗层，用 input 或 textarea 做输入控件，用 focus() 自动激活输入框。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：z-index 不够高导致被遮挡；没禁用背景滚动（body { overflow: hidden; }）；没处理 Esc 关闭；没绑定回车提交逻辑。
- 弹窗
div必须设position: fixed和足够高的z-index（比如9999） - 点击遮罩层（半透明
div）应关闭弹窗，但点击内部输入框区域不能关闭 - 用
textarea替代input支持多行，注意设置rows和resize: none - 回车提交需监听
keydown并判断e.key === 'Enter'且非组合键（!e.shiftKey）
showModal() 配合 <dialog></dialog> 是更现代的选择
<dialog></dialog> 元素原生支持模态行为，配合 showModal() 方法能自动居中、禁用背景交互、支持 Esc 关闭，且语义清晰。但它兼容性有门槛：IE 完全不支持，旧版 Safari 需要 -webkit- 前缀，iOS Safari 16.4+ 才稳定。
使用场景：项目已支持现代浏览器，且不需要兼容 IE 或老 iOS 版本。
- 必须用
dialog.showModal()触发，show()不是模态的 -
<dialog></dialog>默认无样式，需手动加border、padding、background - 关闭后焦点不会自动回到触发按钮，需要手动
button.focus() - 表单内按 Enter 默认会触发表单提交，不是关闭 dialog，得显式
e.preventDefault()
示例：
<dialog id="textDialog"><textarea id="userInput"></textarea><button onclick="this.closest('dialog').close()">确定</button></dialog><button onclick="document.getElementById('textDialog').showModal(); document.getElementById('userInput').focus();">打开文本框</button>
为什么不用第三方库（如 Bootstrap Modal 或 Ant Design）
如果项目里已经引入了 UI 框架，直接用它的 Modal + Input 组合最省事。但要注意：这类组件多数默认不聚焦输入框，也不自动处理回车逻辑，得手动调 inputRef.current?.focus() 和监听 onKeyDown。
性能影响很小，但会增加包体积；兼容性通常比原生 <dialog></dialog> 更好（尤其对 IE）。真正的问题在于“过度设计”：就一个单行文本输入，引入整个 UI 库，反而让加载变慢、维护路径变长。
容易被忽略的地方是焦点管理——无论用哪种方式，用户点击按钮后，光标必须立刻落在输入框里，否则体验断裂。这个细节，90% 的手写弹窗一开始都会漏掉。
