JavaScript: 如何默认选中取消(confirm box)？

在使用JavaScript时，我们经常需要弹出确认对话框(confirm box)。但是，在某些情况下，可能需要将“取消”按钮设置为默认选项。本文将介绍如何通过编写JavaScript代码来实现这一功能。

确认对话框

确认对话框是一种用于通知用户并要求其做出选择的标准浏览器对话框。当我们需要让用户确认某些操作时，可以向他们显示一个确认对话框。这个对话框通常包含两个按钮：确定和取消。

if (confirm("Do you want to delete this item?")) {
  // Delete the item.
} else {
  // Do nothing.
}

在上面的示例中，如果用户点击“确定”按钮，则删除该项目。如果用户点击“取消”按钮，则什么都不发生。

如何默认选中“取消”？

有时候，我们需要将“取消”按钮设置为默认选项，以防止用户意外地执行操作。为了实现这一点，我们可以使用以下代码：

if (confirm("Do you want to delete this item?")) {
  // Delete the item.
} else {
  // Do nothing.
}

document.querySelector('.modal-dialog button:not([class*="btn-primary"])').focus();

在这个代码片段中，我们首先使用确认对话框询问用户是否要删除项目。如果用户单击“取消”按钮，则不做任何操作。接下来，我们使用document.querySelector()来选择确认对话框中的“取消”按钮，并将其聚焦(focus)，从而使它成为默认选项。

总结

在本文中，我们介绍了如何通过编写JavaScript代码来将“取消”按钮设置为确认对话框的默认选项。这个技术可以帮助我们避免意外删除或更改数据等意外操作，并提高用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29749