JavaScript：如何在确认框中默认选择“取消”？

Question

当用户点击“删除数据”按钮时，我会显示一个JavaScript确认框。 我正在按照以下图像显示它：

在图像中，“确定”按钮是默认选择的。 我想默认选择“取消”按钮，以便如果用户意外按下enter键，则记录将安全，并且不会被删除。

是否有一种方法可以使用JavaScript默认选择“取消”按钮？

- djmzfKnm

---

在对话框中，个人认为不应该使用OK/Cancel或Yes/No按钮。最好使用HTML创建自己的对话框，并使用“删除数据”和“取消删除”按钮。这样用户就不必阅读冗长的文本，只需要看按钮即可。也就是说，按钮标签中应该始终包含一个动词。 - Markus Johnsson

@Crescent：这是你的选择，你可以自由地在你的应用程序中使用这种东西。我不感兴趣，谢谢。 - djmzfKnm

@Markus，使用自定义消息框总是更好的选择，但我只是想知道是否有方法在常规JavaScript确认框中设置默认按钮。 - djmzfKnm

值得注意的是，有些情况下在从对话框返回之前必须阻止浏览器，例如当您需要决定是否取消当前事件时。在这些情况下，您不能使用基于DOM的对话框 - 只能使用window.alert或.confirm。 - sinelaw

Answer 1

你无法这样做，但你可以使用/编写自己的对话框，使用DOM元素显示它(就像Phoenix建议的那样，它不一定是特定的jQuery插件，你可以编写自己的或使用另一个JS框架的插件)。

"使用jQuery +插件X"的答案越来越让人厌烦了。有很多JS库，甚至更多的插件。例如，在这里使用任何JS库都是不必要的，如果你只想显示自定义对话框。虽然这是一个快速解决方案/答案，但这样的答案在长远来看会带来更多的负面效果。新手开始学习JavaScript或编程，开始认为jQuery和/或插件是唯一的选择，并且为了编写自己的3行代码而包含50kb+的库(有时甚至并未使用该库: D)。

在我看来，Markus Johnsson的评论是最好的答案，可惜他没有发表为答案。

- Maiku Mori

---

差不多是真的，但别忘了每个最近的浏览器都在缓存中拥有jQuery这一事实。 - AbiusX

@AbiusX，缓存不会在不同的站点之间共享。浏览器也无法保留本地副本，因为它们无法验证<script type="text/javascript" src="jquery.js"></script>实际上是jQuery。如果我错了，请纠正我。 - Maiku Mori

对于那些不想使用jQuery的人来说，有很多替代方案，包括从头开始做一切。然而，在这种情况下，OP标记了问题为“jQuery”，因此可以推断他们已经在使用它 - 或者至少将其作为首选库。因此，如果不使用它来进行对话框，则会导致与所讨论的Web页面相关联的代码更多。 - nnnnnn

Answer 2

我认为你不能这样做。

但是你可以通过强制用户在输入框中键入“y”等方式，使用户更难意外地“同意”确认：

agree = (prompt("Type 'y' to accept", '') == 'y');

- Lukman

---

@Yarin 浏览器有设置/选项来明确禁用这些提示。话说得够了。 - Josh Stodola

可笑的，提示很好。在可能导致灾难性后果的情况下，比如删除重要文件或者同意重大事项时，比简单的按钮更为可靠。建议要求用户输入“是”来确认。 - T4NK3R

说“prompt”是邪恶的，就像许多人说“goto”是邪恶的一样，但这些人没有意识到，就像“prompt”一样，“goto”也是一个有完全合法用途的工具。不正确地使用它是个坏主意，但问题并不在于工具本身。 - Dmitry Frank

Answer 3

如果您可以使用jQuery插件，这里有一个不错的选择：

jQuery Impromptu

更改默认聚焦按钮的方法：

$.prompt('Example 4',{ buttons: { Ok: true, Cancel: false }, focus: 1 });

- rahul

---

这个解决方案的一个微妙问题是它破坏了平台 UI 约定：尽管 Windows 将 OK 放在 Cancel 之前，但大多数其他图形操作系统的顺序是相反的。虽然可能不是什么大问题 :) - Nick

Answer 4

这对我有用

function confirmAction(){
  if(prompt("Type 'YeS' to confirm, this action is irreversible.", '') == 'YeS'){
      another();
  }else{
    alert("Canceled!!!");
  }
}
function another(){
  alert("suuccess");
}

<button onClick="return confirmAction()">Confirm</button>

- Tayyab Hayat