JavaScript: How to select "Cancel" by default in confirm box?

Question

I am displaying a JavaScript confirm box when the user clicks on the "Delete Data" button. I am displaying it as shown in this image:

In the image, the "OK" button is selected by default. I want to select the "Cancel" button by default, so that if the user accidentally presses the enter key, the records will be safe and will not be deleted.

Is there any way in JavaScript to select the "Cancel" button by default?

Solution 1

If you can use jQuery plugin then here is a nice one

jQuery Impromptu

To change the default focused button:

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

Solution 2

You can't do that, but you could use/write your own dialog which is displayed using DOM elements (like phoenix suggested, it just doesn't have to be that particular jQuery plugin, you could write your own or use plugin from another JS framework).

The "use jQuery + plugin X" answers are starting to get annoying. There are a lot of JS libraries out there and even more plugins. For example using any JS library here is unnecessary if you just want to display a custom dialog. While it's a quick solution/answer, answers like that do more harm in a long run then good. People new to JavaScript or programing in general start to think that jQuery and/or plugins are the only way to go and they include 50kb+ library just to write 3 lines of their own (which sometimes don't even use the library :D).

In my opinion Markus Johnsson comment is the best answer, it's a shame it's not posted as one.

Solution 3

I don't think you can do that.

But you can definitely make it harder for the user to accidentally 'agree' with the confirmation, for example by forcing the user to type 'y' in an input box:

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

Comments

[AbiusX]

Well it's almost true, but don't forget the fact that every recent browser has jQuery in its cache.

[Maiku Mori]

@AbiusX, cache is not shared between different sites. Nor can browsers keep a local copy since there is no way for them to verify that <script type="text/javascript" src="jquery.js"></script> is in fact jQuery. Correct me if I'm wrong.

[Josh Stodola]

@Yarin Browsers have settings/options to explicitly disable these prompts. Enough said.

[Nick]

A subtle problem with this solution is that it breaks platform UI conventions: though Windows puts OK before Cancel, most other graphical operating systems have the order reversed. Probably not a huge deal though :)

[nnnnnn]

For those who don't want to use jQuery there are plenty of alternatives, including doing everything from scratch. However, in this case the OP tagged the question with "jQuery", so presumably they're already using it - or at least have it as a preference over other libraries. So not using it for dialogs would result in even more code associated with the Web page in question.

[T4NK3R]

Ridiculous, prompts are fine. And better than simple buttons in situations where choosing the wrong one could result in calamity. Like deleting something big or aggreeing to something momentous: Require the user to TYPE "yes".

[Dmitry Frank]

Saying that prompt is evil is the same as saying that goto is evil (which a lot of people do), without recognizing that goto, just like prompt, is a tool which has totally legitimate use cases. Using it improperly is a bad idea, but that's not the problem with the tool itself.