JavaScript 確認：選擇是或否

在這篇簡短的文章中，我們將討論如何使用 JavaScript 顯示確認對話方塊。確認對話框允許您根據使用者輸入執行操作。

JavaScript 是網路的核心技術之一。大多數網站都使用它，並且所有現代網頁瀏覽器都支援它，而不需要插件。在 Envato Tuts ，我們正在討論可以幫助您進行日常 JavaScript 開發的提示和技巧。

身為 JavaScript 開發人員，您經常需要以是或否問題的形式取得使用者輸入，並基於此執行某些操作。具體來說，有些操作是敏感且無法撤銷的，您希望向使用者發出警告或確認他們是否確實打算執行該操作，以免他們誤操作。例如，如果有一個刪除連結允許您從資料庫中刪除一個實體，您需要與使用者確認他們是否確實要刪除它。因此，即使用戶錯誤地點擊了刪除鏈接，他們至少還有機會取消它。

在這篇文章中，我將向您展示兩種在 JavaScript 中確認使用者操作的方法：使用 confirm 方法和使用隱藏確認 div。

confirm 方法的語法

在 JavaScript 中，您可以使用 window 物件的 confirm 方法來顯示對話框，並等待使用者確認或取消。今天，我們將結合實際範例來討論它的工作原理。

在本節中，我們將介紹 window.confirm 方法的語法。

confirm 方法的語法如下：

var result = window.confirm(message);

confirm 方法採用單一字串參數，您可以傳遞要在對話方塊中顯示的訊息。這是一個可選參數，但您需要傳遞一條明智的訊息，否則將顯示一個帶有是和否選項的空白對話框，並且可能對您的訪客沒有任何意義。通常，訊息採用問題的形式，並向使用者提供兩個選項供選擇。

在對話方塊中，有兩個按鈕：確定和取消。如果使用者點選確定按鈕，confirm方法傳回true，如果使用者點擊取消按鈕，confirm方法回傳false。所以可以透過confirm方法的回傳值來了解使用者的選擇。 （如果您希望按鈕顯示不同的內容，例如是和否，我將在本文底部向您展示如何操作。）

由於window 物件總是隱式的，也就是說它的屬性和方法始終在作用域內，因此您也可以呼叫confirm 方法，如下列程式碼片段所示。

var result = confirm(message);

要注意的是，確認對話方塊是模態且同步的。因此，當顯示對話方塊時，JavaScript 程式碼執行就會停止，而在使用者透過按一下「確定」或「取消」按鈕關閉對話方塊後，JavaScript 程式碼會繼續執行。

這就是 confirm 方法的語法概述。在下一節中，我們將介紹一個現實世界的範例。

confirm 方法的真實範例

在本節中，我們將透過一個實際範例來示範如何在 JavaScript 中使用 confirm 方法。

看一下下面的範例。

當使用者點擊刪除我的個人資料！ 按鈕時，它會呼叫 deleteProfile 函數。在deleteProfile函數中，我們呼叫了confirm方法，該方法向使用者顯示確認對話方塊。

最後，如果使用者按一下確認對話方塊中的確定按鈕，我們將繼續將使用者重定向到 /deleteProfile.php 頁面，該頁面將執行刪除動作。另一方面，如果使用者點擊取消按鈕，我們將不會執行任何操作。 JavaScript 執行將停止，直到使用者做出選擇並關閉確認對話框。

這就是如何使用JavaScript中的confirm方法來呈現是或否選擇對話框。

使用隱藏 Div 確認「是」或「否」

使用 confirm 方法來取得使用者確認有一些缺點。一是確認對話框不會成為您的應用程式或網站 UI 的一部分。它不會使用您的品牌或配色方案。它也無法自訂，例如，如果您想說是或否而不是確定和取消。最後，確認對話方塊是模態的，因此只要顯示它，使用者就無法與應用程式介面的任何其他部分進行互動。

確認是或否的另一種方法是在頁面上使用隱藏的 div。看一下下面的例子：

在此範例中，我們有一個隱藏的確認 div，其 ID 為 confirm。要顯示 div，我們只需將其 hidden 屬性設為 true。當我們想要顯示確認訊息時，我們將 hidden 設為 true，並再次將其設為 false 以隱藏它。

如您所看到的，這種確認是或否的方法比 window.confirm 方法使我們具有更大的靈活性和自訂性。

結論

今天，我們討論了兩種在 JavaScript 中取得使用者確認的方法。首先我們來看最簡單的方法：window.confirm方法。然而，這並不能創造良好的使用者體驗。然後我向您展示如何使用隱藏的 div 來獲得用戶確認，並更好地控制確認的外觀和行為。

以上是JavaScript 確認：選擇是或否的詳細內容。更多資訊請關注PHP中文網其他相關文章！