在上提交 jQuery UI 对话框

发布于05月15日

我有一个带有表单的jQuery UI对话框.我想模拟点击对话框中的一个按钮，这样你就不必使用鼠标或制表符.换句话说，我希望它像一个常规的GUI对话框，模拟点击"OK"按钮.

I assume this might be a simple option with the dialog, but I can't find it in the jQuery UI documentation. I could bind each form input with keyup() but didn't know if there was a simpler/cleaner way. Thanks.

推荐答案

我不知道jQuery UI widget中是否有选项，但您可以简单地将keypress事件绑定到包含对话框的div...

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

This'll run no matter what element has the focus in your dialog, which may or may not be a good thing depending on what you want.

如果希望将其作为默认功能，可以添加以下代码:

// 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");
      }
    });
  };
});