在<Enter>上提交jQuery UI对话框

Question

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

我假设这可能是对话框的一个简单选项,但我在jQuery UI文档中找不到它.我可以使用keyup()绑定每个表单输入,但不知道是否有更简单/更清晰的方式.谢谢.

Answer 1

我不知道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");
      }
    });
  };
});

Answer 2

我总结了上面的答案,并添加了重要的东西

$(document).delegate('.ui-dialog', 'keyup', function(e) {
        var target = e.target;
        var tagName = target.tagName.toLowerCase();

        tagName = (tagName === 'input' && target.type === 'button') 
          ? 'button' 
          : tagName;

        isClickableTag = tagName !== 'textarea' && 
          tagName !== 'select' && 
          tagName !== 'button';

        if (e.which === $.ui.keyCode.ENTER && isClickableTag) {
            $(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');

            return false;
        }
    });

好处:

1. 禁止在诸如非相容元素回车键textarea,select,button或带文字的按钮输入,想象用户点击输入上textarea,并得到越来越提交新的生产线,而不是形式!
2. 绑定完成一次,避免使用对话框'open'回调绑定回车键,以避免每次对话'打开'时反复绑定相同的功能
3. 避免更改现有代码,如上面的一些答案所示
4. 使用'delegate'而不是弃用'live'并避免使用新的'on'方法来允许使用旧版本的jquery
5. 因为我们使用委托,这意味着甚至可以在初始化对话之前编写上面的代码.即使没有,你也可以把它放在头标$(document).ready
6. 委托只会绑定一个处理程序,document并且不会像上面某些代码那样将处理程序绑定到每个对话框,以提高效率
7. 甚至可以使用动态生成的对话框 $('<div><input type="text"/></div>').dialog({buttons: .});
8. 使用ie 7/8/9!
9. 避免使用慢速选择器 :first
10. 避免使用答案黑客一样在这里做一个隐藏的提交按钮

缺点:

1. 运行第一个按钮作为默认按钮,您可以选择另一个按钮eq()或在if语句中调用一个函数
2. 所有对话框都具有相同的行为,您可以通过使选择器更具体来过滤它,即"#dialog"而不是 '.ui-dialog'

我知道这个问题很老但我有同样的需求,所以,我分享了我用过的解决方案.

Answer 3

$('#dialogBox').dialog('open');
$('.ui-dialog-buttonpane > button:last').focus();

它与最新版本的JQuery UI(1.8.1)完美配合.您也可以使用:first而不是:last取决于您要将哪个按钮设置为默认值.

与上面选择的解决方案相比,该解决方案具有显示哪个按钮是用户的默认按钮的优点.用户还可以在按钮之间选择并按ENTER键将单击当前处于焦点下的按钮.

干杯.

Answer 4

一种粗略但有效的方法可以使这项工作更加通用:

$.fn.dlg = function(options) {
    return this.each(function() {
             $(this).dialog(options);
             $(this).keyup(function(e){
                  if (e.keyCode == 13) {                
                       $('.ui-dialog').find('button:first').trigger('click');
                  }
             });
    });
}

然后,当您创建新对话框时,您可以执行以下操作:

$('#a-dialog').mydlg({...options...})

然后像普通的jquery对话框一样使用它:

$('#a-dialog').dialog('close')

有一些方法可以改进它,使其在更特殊的情况下工作.使用上面的代码,它将自动选择对话框中的第一个按钮作为按下以在触发输入时触发的按钮.此外,它假定在任何给定时间只有一个活动对话框可能不是这种情况.但是你明白了.

注意:如上所述,输入时按下的按钮取决于您的设置.因此,在某些情况下,您可能希望在.find方法中使用:first选择器,而在其他情况下,您可能希望使用:last选择器.

Answer 5

而不是像在这个答案(我无法工作)中那样监听密钥代码,你可以在对话框中绑定到表单的submit事件,然后执行以下操作:

$("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click();

所以,整个事情看起来像这样

$("#my_form").dialog({
  open: function(){
    //Clear out any old bindings
    $("#my_form").unbind('submit');
    $("#my_form").submit(function(){
      //simulate click on create button
      $("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click();
      return false;
    });
  },
  buttons: {
    'Create': function() {
      //Do something
    },
    'Cancel': function() {
      $(this).dialog('close');
    }
  }
});

请注意,不同的浏览器以不同的方式处理输入键,有些浏览器并不总是在输入时进行提交.

Answer 6

Ben Clayton是最新和最短的,它可以在任何jquery对话框初始化之前放在索引页面的顶部.但是,我想指出".live"已被弃用.首选操作现在是".on".如果您希望".on"的功能类似于".live",则必须使用委派事件来附加事件处理程序.还有一些其他的东西......

1. 我更喜欢使用ui.keycode.ENTER方法来测试回车键,因为您不必记住实际的密钥代码.

2. 对单击选择器使用"$('.ui-dialog-buttonpane按钮:first',$(this))"使整个方法通用.

3. 你想添加"return false;" 防止默认和停止传播.

在这种情况下...

$('body').on('keypress', '.ui-dialog', function(event) { 
    if (event.keyCode === $.ui.keyCode.ENTER) { 
        $('.ui-dialog-buttonpane button:first', $(this)).click();
        return false;
    }
});