在<enter> </enter>上提交jQuery UI对话框

时间：2009-05-15 14:09:09

标签： javascript jquery jquery-ui

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

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

23 个答案:

答案 0 :(得分：149)

我不知道 jQuery UI小部件 中是否有选项，但您只需将keypress事件绑定到包含您的对话框... 

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

答案 1 :(得分：65)

我总结了上面的答案＆amp;添加了重要的东西

$(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. 使用'委托'而不是弃用的'live'＆amp;避免使用新的“on”方法来允许使用旧版本的jquery
  5. 因为我们使用委托，这意味着甚至可以在初始化对话之前编写上面的代码。即使没有$(document).ready
    6. ，您也可以将其置于标题中
  6. 另外，委托只会将一个处理程序绑定到document，并且不会像上面某些代码那样将处理程序绑定到每个对话框，以提高效率
  7. 即使使用动态生成的对话框也可以使用$('<div><input type="text"/></div>').dialog({buttons: .});
  8. 使用ie 7/8/9！
  9. 避免使用慢速选择器:first
  10. 避免使用答案here中的黑客来制作隐藏的提交按钮

    11. <强>缺点：

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

      3. 我知道这个问题已经过时但我有同样的需求，所以，我分享了我用过的解决方案。

答案 2 :(得分：13)

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

它与最新版本的JQuery UI（1.8.1）完美配合。 您也可以使用：first而不是：last，具体取决于您要将哪个按钮设置为默认值。

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

干杯。

答案 3 :(得分：6)

一种粗略但有效的方法，使这项工作更加通用：

$.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 selector。

答案 4 :(得分：6)

您可以在对话框中绑定表单的提交事件，然后执行此操作，而不是像在此答案中那样（我无法开始工作）来监听键代码，而是执行此操作：

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

请注意，不同的浏览器会以不同的方式处理输入密钥，有些浏览器并不总是在输入时进行提交。

答案 5 :(得分：5)

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

  1. 我更喜欢使用ui.keycode.ENTER方法来测试输入 密钥，因为您不必记住实际的密钥代码。

  2. 使用“$（'。ui-dialog-buttonpane按钮：first'，$（this））”为 单击选择器使整个方法通用。

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

    4. 在这种情况下...... 

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

答案 6 :(得分：4)

我不知道更简单，但通常你会跟踪哪个按钮具有当前焦点。如果焦点更改为不同的控件，则“按钮焦点”将保留在最后焦点的按钮上。通常，“按钮焦点”将从默认按钮开始。按Tab键切换到另一个按钮将改变“按钮焦点”。您必须决定导航到其他表单元素是否会再次将“按钮焦点”重置为默认按钮。您可能还需要一些除浏览器默认值之外的可视指示器来指示聚焦按钮，因为它会失去窗口中的真实焦点。

一旦你按下了按钮聚焦逻辑并实现了，那么我可能会在对话框中添加一个键处理程序，并让它调用与当前“聚焦”按钮相关的动作。

编辑：我假设您希望在填写表单元素时能够输入，并且“当前”按钮操作优先。如果你只是在按钮实际聚焦时只想要这种行为，我的答案太复杂了。

答案 7 :(得分：3)

有时我们会忘记浏览器已经支持的基础：

<input type="submit" style="visibility:hidden" />

这将导致 ENTER 键提交表单。

答案 8 :(得分：3)

我找到了这个解决方案，它适用于IE8，Chrome 23.0和Firefox 16.0

这是基于罗伯特施密特的评论。

$("#id_dialog").dialog({
    buttons: [{
        text: "Accept",
        click: function() {
            // My function
        },
        id: 'dialog_accept_button'
    }]
}).keyup(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER)
        $('#dialog_accept_button').click();
});

我希望它可以帮助任何人。

答案 9 :(得分：2)

这应该可以触发单击按钮的单击处理程序。此示例假定您已在对话框中设置表单以使用jquery.validate插件。但可以很容易地适应。 

open: function(e,ui) {
    $(this).keyup(function(e) {
        if (e.keyCode == 13) {
           $('.ui-dialog-buttonpane button:last').trigger('click');
        }
    });
},
buttons: {
    "Submit Form" : function() {
            var isValid = $('#yourFormsID').valid();
            // if valid do ajax call
            if(isValid){
               //do  your ajax call here. with serialize form or something...

            }
}

答案 10 :(得分：2)

我这样做......;）希望它对某些人有用.. 

$(window).keypress(function(e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $(".ui-dialog:visible").find('.ui-dialog-buttonpane').find('button:first').click();
        return false;
    }
});

答案 11 :(得分：1)

我意识到已经有很多答案，但我自然认为我的解决方案是最好的，也可能是最短的。它的优点是它适用于将来任何时候创建的任何对话框。

$(".ui-dialog").live("keyup", function(e) {
    if (e.keyCode === 13) {
        $('.ok-button', $(this) ).first().click();
    }
});

答案 12 :(得分：1)

这是我做的：

myForm.dialog({
  "ok": function(){
    ...blah...
  }
  Cancel: function(){
    ...blah...
  }
}).keyup(function(e){
  if( e.keyCode == 13 ){
   $(this).parent().find('button:nth-child(1)').trigger("click");
  }
});

在这种情况下，myForm是一个包含表单的html的jQuery对象（注意，那里没有任何“表单”标签...如果你把它们放在整个屏幕上，当你按“enter”时会刷新） 。

每当用户从表单中按“输入”时，它将等同于单击“确定”按钮。

这也避免了在已经突出显示“ok”按钮的情况下打开表单的问题。虽然这对没有字段的表单很有用，但如果您需要用户填写内容，那么您可能希望突出显示第一个字段。

答案 13 :(得分：1)

完成并完成

  $('#login input').keyup(function(e) {
      if (e.keyCode == 13) {
          $('#login form').submit();
      }
   }

答案 14 :(得分：0)

因为我没有足够的声誉发表评论。

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

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

  if (e.which === $.ui.keyCode.ENTER && tagName !== 'textarea' && tagName !== 'select' && tagName !== 'button') {
      $(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');
    return false;
  } else if (e.which === $.ui.keyCode.ESCAPE) {
      $(this).close();
  }
});

Basemm＃35的修改后的答案也在Escape中添加以关闭对话框。

答案 15 :(得分：0)

在body下方使用，因为对话框DIV添加在body上，所以body现在可以监听键盘事件。它在IE8,9,10，Mojila，Chrome上进行了测试。 

open: function() {
$('body').keypress(function (e) { 
     if (e.keyCode == 13) {   
     $(this).parent().find(".ui-dialog-buttonpane button:eq(0)").trigger("click");
     return false; 
     }
  }); 
}

答案 16 :(得分：0)

$('#DialogID').dialog("option", "buttons")["TheButton"].apply()

这对我很有用..

答案 17 :(得分：0)

在IE9中，这些解决方案似乎都不适用于我。我最终得到了这个...... 

$('#my-dialog').dialog({
    ...
    open: function () {
        $(this).parent()
               .find("button:eq(0)")
               .focus()
               .keyup(function (e) {
                   if (e.keyCode == $.ui.keyCode.ENTER) {
                       $(this).trigger("click");
                   };
               });
    }
});

答案 18 :(得分：0)

如果您知道按钮元素选择器：

$('#dialogBox').dialog('open');
$('#okButton').focus();

应该为你做的伎俩。这将关注确定按钮，然后输入将“点击”它，如您所料。这与本机UI对话框中使用的技术相同。

答案 19 :(得分：0)

我找到了一个解决这个问题的简单方法：

var d = $('<div title="My dialog form"><input /></div>').dialog(
    buttons: [{
        text: "Ok",
        click: function(){
            // do something
            alert('it works');
        },
        className: 'dialog_default_button'
    }]
});

$(d).find('input').keypress(function(e){
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        e.preventDefault();
        $('.dialog_default_button').click();
    }
});

答案 20 :(得分：0)

   $("#LogOn").dialog({
       modal: true,
       autoOpen: false,
       title: 'Please Log On',
       width: 370,
       height: 260,
       buttons: { "Log On": function () { alert('Hello world'); } },
       open: function() { $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();}
   });

答案 21 :(得分：-1)

它工作得很好谢谢!!!

open: function () { debugger; $("#dialogDiv").keypress(function (e) { if (e.keyCode == 13) { $(this).parent().find("#btnLoginSubmit").trigger("click"); } }); },

答案 22 :(得分：-1)

按下按钮classes并按常规方式选择它们：

$('#DialogTag').dialog({
  closeOnEscape: true,
  buttons: [
    {
      text: 'Cancel',
      class: 'myCancelButton',
      click: function() {
        // Close dialog fct
      }
    },
    {
      text: 'Ok',
      class: 'myOKButton',
      click: function() {
        // OK fct
      }
    }
  ],
  open: function() {

    $(document).keyup(function(event) {

      if (event.keyCode === 13) {
        $('.myOKButton').click();
      }

    });

  }
});
相关问题
最新问题