web：js提示框、询问框、输入框的使用

简介

在JavaScript中，常见的对话框有三种：警告框（alert）、确认框（confirm）和提示框（prompt）。

1. 警告框（alert）：用于向用户显示一条消息，并只有一个“确定”按钮。

2. 确认框（confirm）：用于让用户确认某个操作，有“确定”和“取消”两个按钮，根据用户点击的不同，返回布尔值（确定返回true，取消返回false）。

3. 提示框（prompt）：用于提示用户输入一些文本，有“确定”和“取消”两个按钮，以及一个文本输入框。点击“确定”返回输入框中的文本，点击“取消”返回null。

在 JavaScript 中，常用的对话框有三种类型，它们都是浏览器内置的全局方法：

功能介绍

警告框 (Alert)

用于显示警告信息，只有​​确定​​按钮

alert("这是一条警告信息");

确认框 (Confirm)

用于确认操作，有​​确定​​和​​取消​​按钮，返回布尔值

const result = confirm("确定要删除吗？");if(result) {// 用户点击了确定} else {// 用户点击了取消}

提示框 (Prompt)

用于用户输入，包含​​确定​​、​​取消​​和​​输入框​

const name = prompt("请输入您的名字", "默认名字");if(name !== null) {console.log(`您输入的名字是：${name}`);
} else {console.log("您取消了输入");
}

性能说明

类型	返回值	是否阻塞代码
alert()	undefined	是
confirm()	true(确定)/false(取消)	是
prompt()	字符串(确定)/null(取消)	是

注意事项：

1. 这些对话框会​​阻塞​​页面操作，直到用户操作

2. 样式由浏览器决定，无法自定义

3. 现代前端开发更推荐使用自定义模态框（例如通过 HTML/CSS 实现）

4. 移动端支持可能有限

 

替代方案（自定义对话框示例）

<!-- HTML -->
<div id="myModal" class="modal"><div class="modal-content"><p id="message"></p><input id="inputField" type="text"><button id="confirmBtn">确定</button><button id="cancelBtn">取消</button></div>
</div><script>
// JavaScript 控制逻辑
function showCustomPrompt(msg, callback) {const modal = document.getElementById('myModal');modal.style.display = 'block';document.getElementById('message').innerText = msg;document.getElementById('confirmBtn').onclick = () => {const val = document.getElementById('inputField').value;callback(val);modal.style.display = 'none';};document.getElementById('cancelBtn').onclick = () => {callback(null);modal.style.display = 'none';};
}
</script>