在< Enter>上提交jQuery UI对话框 [英] Submit jQuery UI dialog on <Enter>

问题描述

我有一个带有表单的jQuery UI对话框。我想模拟对话框的其中一个按钮，这样你就不必使用鼠标或标签了。换句话说，我希望它像一个常规的GUI对话框，模拟点击确定按钮。

I have a jQuery UI dialog box with a form. I would like to simulate a click on one of the dialog's buttons so you don't have to use the mouse or tab over to it. In other words, I want it to act like a regular GUI dialog box where simulates hitting the "OK" button.

我认为这可能是对话框的一个简单选项，但我无法在 jQuery UI文档中找到它。我可以使用keyup（）绑定每个表单输入，但不知道是否有更简单/更清晰的方式。谢谢。

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小部件中是否有选项 ，但您只需将 keypress 事件绑定到包含对话框的div ...

I don't know if there's an option in the jQuery UI widget, but you could simply bind the keypress event to the div that contains your dialog...

$('#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.

如果你想把它作为默认功能，你可以添加这段代码：

If you want to make this the default functionality, you can add this piece of code:

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

这里有一个更详细的看法：

Here's a more detailed view of what it would look like:

$( "#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");
      }
    });
  };
});

这篇关于在< Enter>上提交jQuery UI对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！