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

简介

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

警告框（alert）：用于向用户显示一条消息，并只有一个"确定"按钮。
确认框（confirm）：用于让用户确认某个操作，有"确定"和"取消"两个按钮，根据用户点击的不同，返回布尔值（确定返回true，取消返回false）。
提示框（prompt）：用于提示用户输入一些文本，有"确定"和"取消"两个按钮，以及一个文本输入框。点击"确定"返回输入框中的文本，点击"取消"返回null。

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

功能介绍

警告框 (Alert)

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

javascript 复制代码

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

确认框 (Confirm)

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

javascript 复制代码

const result = confirm("确定要删除吗？");

if(result) {
  // 用户点击了确定

} else {
  // 用户点击了取消

}

提示框 (Prompt)

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

javascript 复制代码

const name = prompt("请输入您的名字", "默认名字");

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

性能说明

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

注意事项：

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

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

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

移动端支持可能有限

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

html 复制代码

<!-- 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>