JavaScript 中的 prompt() 函数使用示例

在 JavaScript 中，prompt() 是浏览器提供的一个内置函数，用于向用户显示一个对话框，提示用户输入信息。它是 window 对象的方法，因此可以简写为 window.prompt() 或直接使用 prompt()。

一、基本语法

let userInput = prompt(message, defaultValue);

• message（字符串）：显示在提示框中的提示信息。
• defaultValue（可选字符串）：输入框中的默认值。

返回值：

• 如果用户点击“确定”，返回输入的内容（字符串）。
• 如果用户点击“取消”或未输入内容并点击“确定”，返回 null 或空字符串（取决于浏览器）。

二、使用示例

let name = prompt("请输入你的名字：", "小明");
if (name !== null) {
    alert("你好，" + name + "！");
} else {
    alert("你没有输入名字。");
}

三、注意事项

1. 阻塞执行：prompt() 是同步阻塞的，会暂停 JavaScript 的执行，直到用户做出响应。
2. 用户体验问题：现代网页开发中，原生的 prompt 框样式老旧，交互体验不佳，通常使用自定义模态框替代。
3. 不适用于移动端：在移动端浏览器中，prompt() 的交互体验较差，推荐使用 <input> 元素或弹窗组件。
4. 不能用于 Node.js 环境：Node.js 没有浏览器的 window 对象，因此 prompt() 不可用。

四、替代方案（推荐）

在现代 Web 开发中，建议使用以下方式替代 prompt()：

• 使用 HTML + CSS + JavaScript 实现自定义弹窗。
• 使用第三方库（如 SweetAlert2、Bootstrap Modal）。
• 使用表单元素（如 <input>）获取用户输入。

示例（自定义弹窗）：

<input type="text" id="userInput" placeholder="请输入内容">
<button onclick="showResult()">提交</button>
<p id="output"></p>
<script>
function showResult() {
    let value = document.getElementById("userInput").value;
    document.getElementById("output").innerText = "你输入的是：" + value;
}
</script>

五、总结

虽然 prompt() 是一个简单易用的用户输入方式，但在实际开发中，由于其样式固定、交互不友好，通常不推荐在正式项目中使用。了解它的基本用法有助于理解浏览器与用户的交互方式，但在实际项目中，建议使用更灵活的自定义组件来提升用户体验。

到此这篇关于JavaScript 中的 prompt() 函数详解的文章就介绍到这了,更多相关js prompt() 函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！