I want to open a jQuery UI dialog when a user presses enter or space on a given element. It appears that the enter/space keys are being processed by the dialog, however, causing the default element (the cancel button) to be pressed. The dialog is closed almost as soon as it opens.
Here is a simplified demonstration:
<script type="text/javascript"> function Go() { $("#dialog").text("Are you sure?").dialog({ modal: true, buttons: { Cancel: function() { $("#dialog").dialog("destroy"); }, OK: function() { $("#dialog").dialog("destroy"); } } }); // end .dialog } </script> <input type="button" value="Test" onkeydown="Go()" /> <div title="Dialog" style="display: none;" id="dialog"></div>
If the button is given focus and then the user presses space the dialog opens and then immediately closes. If the user presses enter, the dialog closes so quickly it doesn't even flash (at least that was my experience with Firefox 3.5.3)
How do I prevent the dialog from processing the key from the onkeydown event which caused the dialog to open?