[解決済み] <Enter>でjQuery UIダイアログを送信する

質問

jQuery UIダイアログボックスとフォームを持っています。私は、ダイアログのボタンの1つをクリックして、マウスを使用したり、それにタブオーバーする必要がないようにシミュレートしたいと思います。言い換えれば、私はそれが"OK"ボタンを押すことをシミュレートする通常のGUIダイアログボックスのように動作するようにしたい。

これはダイアログで簡単なオプションかもしれないと仮定していますが、そのようなオプションは jQuery UI ドキュメント . 私はkeyup()で各フォーム入力をバインドすることができましたが、よりシンプルでクリーンな方法があるかどうかは分かりませんでした。ありがとうございます。

どのように解決するのですか？

のオプションがあるかどうか分かりません。 jQuery UI ウィジェット というように、単純に keypress イベントをダイアログを含む div にバインドすることができます...

$('#DialogTag').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          //Close dialog and/or submit here...
    }
});

これは、ダイアログのどの要素にフォーカスが当たっていても実行されます。

もしこれをデフォルトの機能にしたいのであれば、次のコードを追加します。

// jqueryui defaults
$.extend($.ui.dialog.prototype.options, { 
    create: function() {
        var $this = $(this);

        // focus first button and bind enter to it
        $this.parent().find('.ui-dialog-buttonpane button:first').focus();
        $this.keypress(function(e) {
            if( e.keyCode == $.ui.keyCode.ENTER ) {
                $this.parent().find('.ui-dialog-buttonpane button:first').click();
                return false;
            }
        });
    } 
});

さらに詳しく見てみると、こんな感じです。

$( "#dialog-form" ).dialog({
  buttons: { … },
  open: function() {
    $("#dialog-form").keypress(function(e) {
      if (e.keyCode == $.ui.keyCode.ENTER) {
        $(this).parent().find("button:eq(0)").trigger("click");
      }
    });
  };
});