如何使用 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.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日

6000+ 次檢視

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告