当前位置：首页 > JavaScript

prompt实现js

2026-04-05 13:12:09JavaScript

实现 JavaScript 的 Prompt 功能

JavaScript 的 prompt 方法用于显示一个对话框，提示用户输入信息。它通常用于简单的用户交互场景。

基本语法

let userInput = prompt(message, defaultText);

message：对话框中显示的提示文本。
defaultText：输入框中的默认值（可选）。

示例代码

let name = prompt("请输入您的名字", "张三");
if (name != null) {
    alert("您好，" + name + "!");
}

处理用户输入

用户可能点击取消按钮或直接关闭对话框，此时 prompt 返回 null。需要对此情况进行处理。

let age = prompt("请输入您的年龄");
if (age === null) {
    alert("您取消了输入");
} else if (age === "") {
    alert("您没有输入任何内容");
} else {
    alert("您的年龄是：" + age);
}

类型转换

prompt 始终返回字符串，如需数值需要进行类型转换。

let num = prompt("请输入一个数字");
num = parseFloat(num);
if (isNaN(num)) {
    alert("请输入有效的数字");
} else {
    alert("输入的数字加10等于：" + (num + 10));
}

高级用法

可以结合循环实现输入验证。

let validInput = false;
let input;
while (!validInput) {
    input = prompt("请输入1-100之间的数字");
    if (input === null) break;

    input = Number(input);
    if (!isNaN(input) && input >= 1 && input <= 100) {
        validInput = true;
    } else {
        alert("输入无效，请重新输入");
    }
}
if (validInput) {
    alert("您输入的有效数字是：" + input);
}

注意事项

prompt 会阻塞JavaScript执行，直到用户响应
现代网页设计倾向于使用自定义模态框替代原生 prompt
过度使用 prompt 会影响用户体验

替代方案

考虑使用HTML自定义对话框：

prompt实现js

<div id="customPrompt" style="display:none;">
    <p>请输入信息：</p>
    <input type="text" id="userInput">
    <button id="okBtn">确定</button>
    <button id="cancelBtn">取消</button>
</div>

<script>
document.getElementById('okBtn').addEventListener('click', function() {
    let input = document.getElementById('userInput').value;
    // 处理输入
    document.getElementById('customPrompt').style.display = 'none';
});
</script>