如何使用 JavaScript 顯示確認訊息？

在本教程中，我們將學習如何使用 JavaScript 顯示確認訊息。我們使用 **window.confirm()** 方法 **JavaScript** 來顯示確認訊息。確認訊息包含在一個確認對話方塊中，該對話方塊是一個模態視窗。此類視窗在建立時會獲取焦點，並且在使用者對其做出響應之前不會失去焦點。

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.tw/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日

6K+ 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.