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

简介

在JavaScript中,常见的对话框有三种:警告框(alert)、确认框(confirm)和提示框(prompt)。

  1. 警告框(alert):用于向用户显示一条消息,并只有一个"确定"按钮。

  2. 确认框(confirm):用于让用户确认某个操作,有"确定"和"取消"两个按钮,根据用户点击的不同,返回布尔值(确定返回true,取消返回false)。

  3. 提示框(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(取消)

注意事项:

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

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

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

  4. 移动端支持可能有限

替代方案(自定义对话框示例)

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>
相关推荐
Swift社区4 小时前
GoLand IDE 无法识别 Go 工作区中的引用,如何解决?
开发语言·ide·golang
科大饭桶4 小时前
C++入门自学Day17-- 模版进阶知识
c语言·开发语言·c++·容器
91刘仁德4 小时前
c++ 类和对象(上)
开发语言·c++·经验分享·笔记·算法
海洋的渔夫7 小时前
1-ruby介绍、环境搭建、运行 hello world 程序
开发语言·后端·ruby
Small black human8 小时前
前端-什么是Vue
前端·javascript·vue.js
IT 前端 张9 小时前
Axios与Ajax:现代Web请求大比拼
前端·javascript·ajax
葵野寺10 小时前
【RelayMQ】基于 Java 实现轻量级消息队列(五)
java·开发语言·java-rabbitmq
AI 嗯啦11 小时前
Python 爬虫案例:爬取豆瓣电影 Top250 数据
开发语言·爬虫·python
1candobetter11 小时前
软考中级习题与解答——第二章_程序语言与语言处理程序(1)
开发语言
~kiss~11 小时前
MCP Go SDK学习一
开发语言·后端·golang