Ligue a tecla Enter (13) para clicar no botão de diálogo modal jQuery

Parece que o jQuery Dialog não tem realmente uma tecla enter padrão para o comportamento de clique. Esse é o tipo de coisa que você veria nas caixas de diálogo do sistema operacional ou do aplicativo. Além disso, não há realmente uma maneira real de fazer isso, mas parece funcionar muito bem:

$('.gps-cancel-form').dialog({
autoOpen
: false,
resizable
: false,
height
:200,
width
:500,
modal
: true,
title
: 'Confirm Navigation',
buttons
: [
{
click
: function() {
App.backToOptionsHelper();
$
( this ).dialog( 'close' );
},
tabindex
: 1,
class: 'dialog-button',
text
: 'Leave Page'
},
{
click
: function() {
$
( this ).dialog( 'close' );
},
tabindex
: 2,
class: 'dialog-button',
text
: 'Stay on Page'
}
]
});

$
('body').on('keydown', '.dialog-button', function (event) {
var myself = this;
if (event.keyCode === $.ui.keyCode.ENTER
&& $(document.activeElement).hasClass('dialog-button')) {
$
(myself).trigger('click');
$
(myself).blur();
event.stopPropagation();
}
});

De importância:

  1. O construtor de diálogo com a matriz de objetos de botão
  2. O evento keydown delegado anexado à classe do botão
  3. && $ (document.activeElement) .hasClass (‘dialog-button’) que é realmente a parte mais importante, porque você só deseja que o ‘clique’ aconteça no elemento ativo.

Desconhecidos:

Aparentemente você tem que ter tabindexes para que isso funcione?

Socorro:

[Stack Overflow]: http://stackoverflow.com/questions/2522125/jquery-ui-dialog-make-a-button-in-the-dialog-the-default-action-enter-key

[Stack Overflow]: http://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus