如何使用 JavaScript 显示确认消息?
在本教程中，我们将学习如何使用 JavaScript 显示确认消息。我们使用 JavaScript 的 window.confirm() 方法来显示确认消息。确认消息包含在确认对话框中，该对话框是一个模式窗口。这样的窗口在创建时会获得焦点，直到用户响应它才会失去焦点。
JavaScript 中的确认对话框
确认消息是需要立即引起用户注意的"是/否"消息。确认对话框通常会在响应用户请求的某些操作时触发。此操作可以是任何操作，例如打开新页面、提交表单、重定向到其他网站等。确认框有两个按钮:确定和取消。根据用户选择的选项，返回一个布尔值，然后使用该值来完成操作请求或关闭确认框并继续。
对话框可以被认为是警告框的超集。主要有三种对话框 -
- 警告框
- 确认框
- 提示框
JavaScript 中的确认框是使用 confirm() 方法创建的。此方法接受单个字符串参数，即确认框中显示的消息。
语法
var isConfirmed = confirmed("您的确认消息");
然后可以使用 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://www.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 中的对话框显示重要消息、警报或警告。应在适当的位置明智地使用它们以增强用户体验。
