When focus is on a button in a JQuery dialog, the space bar does two things: it selects the button and it scrolls the window. People who are familiar with space bar as a tool for selecting buttons will expect the first but find the second jarring and inappropriate.

So the question: how do I prevent the page from scrolling? I had thought that it was just a matter of returning false from the button handler but that does not appear to be true.

When focus is on a button in a JQuery dialog, the space bar does two things: it selects the button and it scrolls the window. People who are familiar with space bar as a tool for selecting buttons will expect the first but find the second jarring and inappropriate.

So the question: how do I prevent the page from scrolling? I had thought that it was just a matter of returning false from the button handler but that does not appear to be true.

• javascript
• jquery

1 Answer 1

I've tried the solution suggested here and elsewhere and none of them worked for me. What finally worked was a document-wide keydown handler like this:

$(document).keydown(function (e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    if ((key == 32) && (e.target.className != null) && (e.target.className.indexOf("ui-button") != -1))
       e.preventDefault();
 });

The key == 32 is obviously a check for the space bar. The className is a check for whether the UI (User Interface) element in question is a JQuery button. Without the button check, the space bar is disabled everywhere.