I have a windows confirm dialog in my javascript code which shows Ok and Cancel buttons. However, when the dialog pops-up, I noticed that usualy the Ok button is the one highlighted one and when I press enter, it acts as if I’m pressing the Ok button. Similarly, I have seen Esc button responding to the dialog as well. Is there a way I can disable keyboard button related responses with the dialog or do I need to switch to jQuery dialog to handle my requirements?
The default behavior of the window.confirm dialog doesn’t provide a way to disable keyboard responses. To gain such control, you would likely need to use a custom dialog, or roll your own.
That said, please don’t do that. Keyboard navigation is essential for users who rely on assistive technologies or cannot use a mouse. There are also many users (like me) who just prefer to use a keyboard to navigate around the screen. Any changes that inhibit the ability to use keyboard controls will make your application less accessible.
Why is the keyboard interaction a problem for you?
4 Likes
I can understand. However, in my scenario it’s being used by some students and they are not paying attention to the dialog and just hitting keyboard buttons and hence I want to remove the keyboard interaction.
Is jQuery dialog going to work here if I start using it and then do the modification needed?
Should do. Just pop the dialog open, then set the focus to the document body or whatever.
If you can post a quick reproducible example, I’d be happy to take a look.
If you do not want the user to ignore the dialogs content, add a „I have read and agree“ and „I disagree“ checkmark to the dialog. Instead of ok and cancel buttons you have a submit or select button which is disabled as long as no checkmark is set
Here’s my windows confirm dialog which I’m planning to replace with jQuery to stop keyboard interaction. Please take a look. Thanks!
Sorry, I meant if you make a small demo with whichever jQuery modal library you are using, I’ll have a look at that 
You can hook into the dialog’s open method to blur the button, ensuring nothing is focused when the modal fires.
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
},
},
open: function() {
$(this).siblings('.ui-dialog-buttonpane').find('button:eq(0)').blur();
},
});
When I see it using this JSFiddle (https://jsfiddle.net/jk4vf2pt/show ) and click on Run fiddle, It is still showing me as Yes selected and keyboard control works here. Am I missing anything here?
I think that’s a JS fiddle thing. Try this on your computer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Modal</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://resources/demos/style.css">
</head>
<body>
<div id="dialog-confirm" title="Select your choice!?">
<p>The next sequential value for the Case number is 1001. Click Yes to use the next sequential value or Cancel to proceed with yours!</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"Cancel": function() {
$( this ).dialog( "close" );
}
},
open: function() {
$(this).siblings('.ui-dialog-buttonpane').find('button:eq(0)').blur();
}
});
</script>
</body>
</html>
After the modal has fired, when you click the page, the button will be focused again, but initially it should be unfocused (meaning that it cannot be dismissed via the keyboard without clicking the page first).
I see. I will give it a try. Thanks. I think if I don’t use the above URL and just use actual JSFiddle code playground, it works as you mentioned.
Could you elaborate on how this works? I mean how it is stopping the keyboard interaction? and what blur effect it is doing?
One problem with your approach is when I click on the screen anywhere while the popup dialog is shown, it starts focusing on the Yes button again. So if I am understanding it correctly, it’s not a very efficient approach?
Yeah, right. I noticed that. But I thought what you were trying to do was to prevent students just hitting keyboard buttons and dismissing the dialog without reading what was in it. Surely, if you have to click on the page with the mouse, then hit a keyboard button this discounts people who are spamming the Enter key.
That said, you could specify the buttons in an array and give them a negative tabIndex value. That makes them unable to be interacted with via the keyboard.
$('#dialog-confirm').dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
closeOnEscape: false,
open: () => { $('.ui-dialog-titlebar-close').hide(); },
buttons: [
{
tabIndex: -1,
text: 'Yes',
click: function(){
// Handle Yes
$(this).dialog('close');
}
},
{
tabIndex: -1,
text: 'No',
click: function(){
// Handle No
$(this).dialog('close');
}
}
]
});
For good measure I have added:
closeOnEscape: false,
open: () => { $('.ui-dialog-titlebar-close').hide(); },
To prevent people closing the dialog via the Escape key, and also to hide the X in the top right hand corner, as otherwise that will receive focus.
HTH, but please don’t do this on a public facing website.
2 Likes
I believe it would be easier to use the html5 dialog element than the jQuery one.
Here is an example I use for showing data. Mainly what is being sent and received from the server.
Just use your own html.
The $id(“??”) returns the element with the specified id
The dlgCancel is used for all my dialogs and can be replaced by
$id('dlgAnchor').innerHTML = "";
const $id = id => document.getElementById(id);
const dlgCancel = ev => {
let dlg = ev.target.closest("dialog");
dlg.close();
dlg.remove();
}
const popup = (html) => {
let dlg = `
<dialog id="popup" >
<div class="modal-body">
<header class="dlg_header">
<h1>Request response</h1>
</header>
<div>
${html}
</div>
</div>
<hr />
<footer id="file_dialog-footer">
<p><button id = "dismis" class = "dlgCtrl" name = "no" type="button">Dismis</button>
</footer>
</dialog>
`;
$id('dlgAnchor').innerHTML = dlg;
$id('popup').showModal();
$id('dismis').addEventListener('click', dlgCancel, false);
}
I have an empty div element as the first child of the body element with an id of “dlgAnchor”
The dialog then is a child element of the dlgAnchor div element.
The dialog here is modal, focus is restricted to the dialog.
This dialog only uses one button, more buttons along with their event listeners can be added.
1 Like