JavaScript window.prompt
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 window.prompt 方法。此方法会显示一个对话框，提示访问者输入信息，非常适合简单的用户交互。
基本定义
window.prompt 方法会显示一个对话框，其中包含一个可选的消息，提示用户输入一些文本。它会返回用户输入的文本，如果用户取消对话框，则返回 null。
该方法接受两个参数：要显示的消息（可选）和输入字段的默认值（也可选）。对话框包含“确定”和“取消”按钮。
基本的 window.prompt
此示例演示了 window.prompt 获取用户输入的用最简单的方法。
const name = window.prompt("What is your name?");
console.log(`Hello, ${name || 'anonymous'}!`);
在这个基本示例中，我们显示一个提示，询问用户的姓名。返回的值存储在 name 变量中，然后记录到控制台。
如果用户单击“取消”或关闭对话框，则会返回 null。在这种情况下，逻辑 OR 运算符会提供一个备用值。这展示了 window.prompt 的基本用法。
带有默认值的提示
此示例展示了如何使用第二个参数提供默认值。
const age = window.prompt("Enter your age:", "30");
if (age !== null) {
console.log(`You are ${age} years old.`);
} else {
console.log("Age input was canceled.");
}
这里我们为年龄输入提供默认值“30”。用户可以选择接受此值或输入其他值。我们还演示了正确的 null 检查。
当您想向用户建议一个可能的值，但仍允许他们进行更改时，此模式非常有用。默认值会显示为输入字段中已选中的状态。
数字输入验证
此示例演示了如何验证来自提示的数字输入。
let number;
do {
const input = window.prompt("Enter a number between 1 and 100:");
if (input === null) {
console.log("Input canceled");
break;
}
number = Number(input);
} while (isNaN(number) || number < 1 || number > 100);
if (number) {
console.log(`You entered: ${number}`);
}
此代码会反复提示用户，直到他们输入指定范围内的有效数字或取消提示。我们使用 Number() 将字符串输入转换为数字。
验证会检查 NaN（非数字）并确保数字在所需范围内。这展示了如何使用提示处理用户输入验证。
基于提示的条件逻辑
此示例展示了如何在条件逻辑中使用提示输入。
const response = window.prompt("Do you like JavaScript? (yes/no)");
if (response === null) {
console.log("User canceled the question.");
} else if (response.toLowerCase() === "yes") {
console.log("Great! JavaScript is awesome!");
} else if (response.toLowerCase() === "no") {
console.log("That's too bad. Maybe you'll change your mind.");
} else {
console.log("Please answer with 'yes' or 'no'.");
}
在这里，我们提出一个是/否问题，并根据用户的输入做出不同的响应。我们将响应转换为小写，以使比较不区分大小写。
这演示了如何使用提示输入来驱动程序逻辑。else 分支处理意外输入，使代码更健壮。
存储多个提示响应
此示例展示了如何收集和存储多个信息。
const user = {};
user.name = window.prompt("What is your name?");
user.age = window.prompt("What is your age?");
user.email = window.prompt("What is your email?");
if (user.name && user.age && user.email) {
console.log("User profile created:");
console.log(user);
} else {
console.log("Profile creation canceled or incomplete.");
}
在此示例中，我们创建一个用户对象，并使用多个提示的值填充其属性。然后，我们在继续之前检查是否提供了所有必需的字段。
此模式对于按顺序收集多条信息非常有用。对象结构有助于组织收集的数据。
来源
在本文中，我们展示了如何在 JavaScript 中使用 window.prompt。此方法对于 Web 开发中的简单用户交互和输入收集非常有用。
作者
列出 所有 JS DOM 教程。