如何在HTML中弹出输入框？

浏览器原生方法

prompt() 基础弹窗

<script>
function showPrompt() {
  const userInput = prompt("请输入您的姓名：", "默认值");
  if (userInput !== null) {
    alert("您输入的内容是：" + userInput);
  }
}
</script>
<button onclick="showPrompt()">点击弹出输入框</button>

• 特点：
  浏览器内置，无需额外代码；但样式不可定制,且会阻塞页面操作。

confirm() 确认弹窗

if (confirm("确定要删除吗？")) {
  // 用户点击"确定"后的逻辑
}

自定义模态框（推荐）

通过HTML/CSS创建可定制的弹窗：

<style>
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}
.modal-content {
  background: white;
  margin: 15% auto;
  padding: 20px;
  width: 300px;
  border-radius: 8px;
}
</style>
<div id="myModal" class="modal">
  <div class="modal-content">
    <input type="text" id="userInput" placeholder="请输入内容">
    <button onclick="submitInput()">提交</button>
  </div>
</div>
<button onclick="openModal()">打开自定义弹窗</button>
<script>
function openModal() {
  document.getElementById("myModal").style.display = "block";
}
function submitInput() {
  const input = document.getElementById("userInput").value;
  alert("提交成功：" + input);
  document.getElementById("myModal").style.display = "none";
}
</script>

• 优势：
  • 完全控制样式和动画（如CSS3过渡效果）
  • 支持复杂布局（多输入框、下拉菜单等）
  • 非阻塞式交互

第三方库实现（高效方案）

使用SweetAlert2库（需引入CDN）：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
async function showSweetAlert() {
  const { value: input } = await Swal.fire({ '输入信息',
    input: 'text',
    inputPlaceholder: '请输入邮箱',
    showCancelButton: true
  });
  if (input) {
    Swal.fire(`提交成功: ${input}`);
  }
}
</script>
<button onclick="showSweetAlert()">SweetAlert弹窗</button>

• 优点：
  响应式设计、内置动画、无障碍支持,减少开发时间。

最佳实践与注意事项

1. 用户体验优先

   • 移动端使用全屏弹窗（避免元素过小）
   • 添加半透明遮罩层引导用户聚焦
   • 提供明确的关闭按钮（右上角×或取消按钮）

2. 安全性

   

   • 验证输入内容（防XSS攻击）：

     const sanitizeInput = input.replace(/<[^>]*>/g, ""); // 过滤HTML标签

   • 敏感信息（如密码）使用type="password"

3. 性能优化

   • 避免频繁弹出（如页面加载时自动弹出）
   • 单页面应用建议动态创建/销毁DOM节点

4. 无障碍访问

   • 为弹窗添加aria-*属性：

     <div role="dialog" aria-labelledby="modalTitle">
       <h2 id="modalTitle">用户登录</h2>
       ...
     </div>

   • 焦点管理（打开时聚焦到输入框,关闭后焦点返回原按钮）

适用场景建议

• 优先选择自定义模态框或SweetAlert2，平衡开发效率与用户体验
• 原生prompt()仅适用于简单场景
• 始终关注安全性、无障碍和响应式设计

引用说明：

1. MDN Web Docs – Window.prompt()
2. SweetAlert2官方文档 – 弹窗示例
3. W3C无障碍指南 – WAI-ARIA Dialog Pattern