当前位置：首页 > JavaScript

js 实现prompt

2026-02-02 03:28:47JavaScript

使用 JavaScript 实现 prompt

在 JavaScript 中，prompt 是一个内置函数，用于显示一个对话框，提示用户输入文本。以下是如何使用 prompt 的基本方法：

let userInput = prompt("请输入您的姓名：", "默认值");

这段代码会弹出一个对话框，显示提示信息“请输入您的姓名：”，并提供一个默认值为“默认值”的输入框。用户输入的内容会被存储在变量 userInput 中。

处理用户输入

用户点击“取消”或关闭对话框时，prompt 返回 null。可以通过条件判断处理这种情况：

js 实现prompt

let userInput = prompt("请输入您的年龄：");
if (userInput !== null) {
    console.log("您输入的年龄是：" + userInput);
} else {
    console.log("用户取消了输入");
}

结合数据类型转换

prompt 返回的值始终是字符串类型。如果需要数值或其他类型，需手动转换：

let age = prompt("请输入您的年龄：");
if (age !== null) {
    age = parseInt(age);
    if (!isNaN(age)) {
        console.log("明年您的年龄将是：" + (age + 1));
    } else {
        console.log("请输入有效的数字");
    }
}

自定义样式限制

浏览器自带的 prompt 无法自定义样式。如果需要更灵活的输入框，可以通过 HTML 和 CSS 创建自定义模态框，并用 JavaScript 控制其行为：

js 实现prompt

<div id="customPrompt" style="display:none;">
    <p>请输入您的邮箱：</p>
    <input type="text" id="customInput">
    <button onclick="handleCustomPrompt()">提交</button>
</div>

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

function handleCustomPrompt() {
    let input = document.getElementById("customInput").value;
    console.log("用户输入：" + input);
    document.getElementById("customPrompt").style.display = "none";
}
</script>