当前位置：首页 > JavaScript

js 实现prompt

2026-03-15 03:00:48JavaScript

使用 `prompt` 方法实现用户输入弹窗

prompt 是 JavaScript 提供的原生方法，用于在浏览器中弹出一个对话框，提示用户输入信息。

基本语法：

let userInput = prompt("提示信息", "默认值");

提示信息：显示在弹窗中的文本，告知用户需要输入的内容。
默认值（可选）：输入框中的默认值，用户可以直接修改或提交。
返回值：用户输入的内容（字符串类型），如果用户取消输入则返回 null。

示例：

let name = prompt("请输入您的名字", "张三");
if (name !== null) {
  console.log("您输入的名字是：" + name);
} else {
  console.log("您取消了输入");
}

结合 `confirm` 进行确认

prompt 通常可以与 confirm 结合使用，让用户在输入后进行确认操作。

示例：

let age = prompt("请输入您的年龄", "18");
if (age !== null) {
  let isConfirmed = confirm(`您输入的年龄是 ${age}，确认吗？`);
  if (isConfirmed) {
    console.log("年龄已确认：" + age);
  } else {
    console.log("年龄未确认");
  }
}

注意事项

返回值类型：prompt 返回的始终是字符串，如果需要数字，需手动转换：
```
let age = parseInt(prompt("请输入年龄", "18"));
```
浏览器兼容性：现代浏览器均支持 prompt，但在某些严格模式（如 Content Security Policy）下可能被禁用。
用户体验：prompt 会阻塞页面交互，适用于简单交互，但不推荐在复杂应用中使用（推荐自定义模态框）。

替代方案（自定义弹窗）

如果需要更灵活的交互，可以使用 HTML + CSS + JavaScript 实现自定义弹窗：

js 实现prompt

<div id="customPrompt" style="display: none;">
  <p>请输入您的名字：</p>
  <input type="text" id="nameInput" />
  <button onclick="submitName()">确定</button>
  <button onclick="cancelName()">取消</button>
</div>

<script>
  function showCustomPrompt() {
    document.getElementById("customPrompt").style.display = "block";
  }

  function submitName() {
    let name = document.getElementById("nameInput").value;
    console.log("输入的名字是：" + name);
    document.getElementById("customPrompt").style.display = "none";
  }

  function cancelName() {
    console.log("用户取消了输入");
    document.getElementById("customPrompt").style.display = "none";
  }
</script>