如何使用 JavaScript 显示确认消息？

在本教程中，我们将学习如何使用 JavaScript 显示确认消息。我们使用 JavaScript 的 `window.confirm()` 方法来显示确认消息。确认消息包含在一个确认对话框中，这是一个模态窗口。此类窗口在创建后会获得焦点，并且在用户响应之前不会失去焦点。

JavaScript 中的确认对话框

**确认消息** 是一个需要用户立即关注的“是/否”消息。确认对话框通常是响应用户请求的某些操作而触发的。此操作可以是任何操作，例如**打开新页面、提交表单、重定向到不同的网站**等。确认框有两个按钮：**确定**和**取消**。根据用户选择的选项，将返回一个布尔值，然后将其用于满足操作请求或关闭确认框并继续。

**对话框** 可以被认为是警告框的超集。主要有三种对话框：

  • 警告框
  • 确认框
  • 提示框

JavaScript 中的确认框是使用 `confirm()` 方法创建的。此方法接受单个字符串参数，该参数是在确认框中显示的消息。

语法

var isConfirmed = confirm("Your Confirmation Message");

然后可以使用存储在 `isConfirmed` 中的值来处理请求。

让我们来看一个例子：

示例 1

在这里，我们将显示一个 JavaScript 确认消息，在退出窗口之前进行确认。让我们看看相应的代码。

<html>
<head>
   <script>
      function getConfirmation() {
         var result = document.getElementById("result");
         var retVal = confirm("Do you want to continue ?");
         if (retVal == false) {
            result.innerHTML = "User does not want to continue !";
         } else {
            var url = window.location.href;
            window.open(url);
         }
      }
   </script>
</head>
<body>
   <h3>Using JavaScript to show a confirm message: <br></h3>
   <p>The Below button duplicates this tab</p>
   <form>
      <input type="button" value="Duplicate ?" onclick="getConfirmation();" />
   </form>
   <div id="result"></div>
</body>
</html>

在上面的代码中，我们创建了一个确认框，它获取用户的许可，并根据它复制选项卡或关闭选项卡。

让我们来看另一个例子，这次我们将在 HTML 文档中使用超链接。

示例 2

在这里，我们将显示一个 JavaScript 确认消息，在重定向到链接之前进行确认。

<html>
<head>
</head>
<body>
   <h3>Using JavaScript to show a confirm message: <br></h3>
   <p>click on the below link to create a confirmation box
      <br><br>
      <a href="https://tutorialspoint.com/javascript/index.htm" id="link">Javascript Tutorials</a>
   </p>
   <div id="result"></div>
   <script>
      var result = document.getElementById("result");
      var link = document.getElementById("link");
      link.onclick = function() {
         var check = confirm("Are you sure you want to leave?");
         if (check == true) {
            return true;
         } else {
            return false;
         }
      }
   </script>
</body>
</html>

我们将一个点击处理程序附加到链接，该处理程序在重定向到点击的链接之前创建一个确认框。从函数到按钮的 onclick 属性返回的值处理请求。

确认框在表单中具有很大的实用性。如果意外按下按钮，它可以让用户有机会取消提交。

示例 3

在这里，我们将创建一个模拟表单来了解确认框的实用性。

<html>
<head>
   <script>
      function getConfirmation() {
         var result = document.getElementById("result");
         var form = document.getElementById("form");
         var retVal = confirm("Do you want to submit ?");
         form.reset();
         if (retVal == false) {
            result.innerHTML = "Any sort of accidental click can be handled this way !";
         } else {
            result.innerHTML = "Form Submitted !";
         }
      }
   </script>
</head>
<body>
   <h3>Using JavaScript to show a confirm message: <br></h3>
   <p>click on the below link to create a confirmation box
      <br><br>
      <form id="form">
         <label for="name">Name</label><br>
         <input type="text" id="name"><br>
         <label for="age">Age</label><br>
         <input type="text" id="age"><br>
      </form>
      <button onclick="getConfirmation()">Submit</button>
   </p>
   <div id="result"></div>
</body>
</html>

但是，它也有一些**缺点**。确认框是对话框的一部分，对话框是一个**模态窗口**。这些类型的窗口在呈现时会完全获得焦点，并且在对框执行操作之前不会关闭，从而阻止用户与网页交互。UI 元素应该只用于重要的确认、警报和警告。

结论

JavaScript 中的对话框显示重要的消息、警报或警告。应该在适当的位置明智地使用它们以增强用户体验。

更新于：2022年11月10日

6000+ 次查看

启动你的职业生涯

通过完成课程获得认证

开始学习
广告