在<Enter>上提交jQuery UI对话框
我有一个窗体的jQuery UI对话框。 我想模拟点击一个对话框的button，所以你不必使用鼠标或选项卡。 换句话说，我希望它能像一个常规的GUI对话框那样模拟点击“OK”button。
我认为这可能是一个对话框的简单选项，但我无法在jQuery UI文档中find它。 我可以绑定每个表单input与keyup（），但不知道是否有一个更简单/清洁的方式。 谢谢。
我不知道在jQuery UI小部件中是否有一个选项，但是您可以简单地将keypress事件绑定到包含对话框的div。
$('#DialogTag').keypress(function(e) { if (e.keyCode == $.ui.keyCode.ENTER) { //Close dialog and/or submit here... } });
无论哪个元素在对话框中的重点都会运行，根据您的需要，这可能是也可能不是一件好事。
如果你想使这个默认function，你可以添加这段代码：
// 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"); } }); }; });
我总结了上面的答案，并增加了重要的东西
$(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; } });
优点：
- 禁止在不兼容的元素，如
textarea，select，button或inputtypesbutton的input键，想象用户单击textareainput并获取提交的表单，而不是得到新的行！ - 绑定完成一次，避免使用对话框“打开”callback绑定回车键，以避免每次对话框“打开”时不断绑定相同的function
- 避免改变现有的代码，因为上面的答案build议
- 使用“委托”而不是弃用的“活”，并避免使用新的“on”方法，以允许使用旧版本的jquery
- 因为我们使用委托，这意味着上面的代码甚至可以在初始化对话框之前编写。 即使没有$（document）.ready，也可以把它放在head标签中
- 此外，代理将只绑定一个处理程序到
document，并不会像上面的代码那样将处理程序绑定到每个对话框，以提高效率 - 即使使用dynamic生成的对话框（如
$('<div><input type="text"/></div>').dialog({buttons: .}); - 与7/8/9工作！
- 避免使用慢select器
:first - 避免使用像这里的答案黑客提交一个表单，按回车没有提交button ，使一个隐藏的提交button
坏处：
- 运行第一个button作为默认的button，你可以用eq（）select另外一个button或者在if语句中调用一个函数
- 所有的对话框会有相同的行为，你可以通过使你的select符更具体，即“#dialog”而不是“.ui-dialog”
我知道问题是旧的，但我有同样的需要，所以我分享了我使用的解决scheme
$('#dialogBox').dialog('open'); $('.ui-dialog-buttonpane > button:last').focus();
它使用最新版本的JQuery UI（1.8.1）。 您也可以使用：首先，而不是：最后取决于您要设置为默认的button。
与上面select的相比，该解决scheme具有显示哪个button是用户的默认button的优点。 用户也可以在button之间进行select，按下ENTER键将点击当前焦点下的button。
干杯。
一个简单而有效的方式使这项工作更一般化：
$.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'); } }); }); }
然后当你创build一个新的对话框，你可以这样做：
$('#a-dialog').mydlg({...options...})
然后像使用普通的jquery对话一样使用它：
$('#a-dialog').dialog('close')
有很多方法可以改进，使它在更特殊的情况下工作。 使用上面的代码，它会自动select对话框中的第一个button作为button来触发input时被击中。 另外，它假设在任何给定的时间只有一个活动对话，可能并非如此。 但是你明白了。
注意：如上所述，input时按下的button取决于您的设置。 因此，在某些情况下，您可能想在.find方法中使用：firstselect器，而在其他情况下，您可能需要使用：lastselect器。
而不是像在这个答案（我不能工作）听密钥代码，你可以绑定到对话框中的窗体的提交事件，然后执行此操作：
$("#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'); } } });
请注意，不同的浏览器处理input密钥的方式不同，有些并不总是在input时进行提交。
本Clayton的是最neest和最短的，它可以被放置在任何jQuery对话框初始化之前，您的索引页面的顶部。 不过，我想指出“.live”已被弃用。 首选的操作是“.on”。 如果你想“.on”的function像“.live”，你必须使用委托事件附加事件处理程序。 还有其他一些事情
-
我更喜欢使用ui.keycode.ENTER方法来testing回车键，因为您不必记住实际的密钥代码。
-
对于点击select器使用“$（'。ui-dialog-buttonpane”button：first'，$（this））“使得整个方法是通用的。
-
你想添加“返回false” 防止默认并停止传播。
在这种情况下…
$('body').on('keypress', '.ui-dialog', function(event) { if (event.keyCode === $.ui.keyCode.ENTER) { $('.ui-dialog-buttonpane button:first', $(this)).click(); return false; } });
我不知道更简单，但通常你会跟踪哪个button有当前的焦点。 如果焦点更改为其他控件，则“button焦点”将保留在焦点最后的button上。 通常，“button焦点”将在您的默认button上开始。 标签到不同的button将改变“button焦点”。 您必须决定是否导航到不同的表单元素将重新设置“button焦点”到默认button。 除了浏览器默认值之外，您还可能需要一些视觉指示器来指示焦点button，因为它在窗口中失去了真正的焦点。
一旦你有button焦点逻辑下来和实现，那么我可能会添加一个键处理程序的对话框本身，并调用与当前“聚焦”button关联的行动。
编辑 ：我正在做的假设，你想能够在任何时候填写表单元素，并有“当前”button操作优先。 如果只在button被实际聚焦时才需要这种行为，我的答案太复杂了。
我发现这个解决scheme，它的工作在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(); });
我希望它能帮助任何人。
有时候我们忘记了浏览器已经支持的基础：
<input type="submit" style="visibility:hidden" />
这将导致ENTER键提交表单。
完成并完成
$('#login input').keyup(function(e) { if (e.keyCode == 13) { $('#login form').submit(); }
}
我做了这样的方式…）希望它会有所帮助的人..
$(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; } });
这应该可以触发点击button的点击处理程序。 这个例子假设你已经在对话框中设置了使用jquery.validate插件的forms。 但可以很容易地适应。
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... } }
我意识到已经有很多答案了，但我自然地认为我的解决scheme是最好的，也可能是最短的。 它的优点是它可以在将来任何时候创build的任何对话框上工作。
$(".ui-dialog").live("keyup", function(e) { if (e.keyCode === 13) { $('.ok-button', $(this) ).first().click(); } });
如果你知道button元素select器：
$('#dialogBox').dialog('open'); $('#okButton').focus();
应该为你做的伎俩。 这将重点确定button，并input将点击它，如你所料。 这与原生UI对话框中使用的技术相同。
$("#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();} });
$('#DialogID').dialog("option", "buttons")["TheButton"].apply()
这对我来说很好
这是我做的：
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对象（注意，在那里没有任何“form”标签…如果你把它们放在整个屏幕上，当你按下“enter”时会刷新）。
每当用户从表单中按下“input”，它将相当于单击“确定”button。
这也避免了已经突出显示的“确定”button打开窗体的问题。 虽然这对于没有字段的表单来说很好，但如果你需要用户填写内容，那么你可能希望第一个字段被突出显示。
我发现这个问题很简单：
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(); } });
在IE9中，这些解决scheme似乎都不适合我。 我结束了这个..
$('#my-dialog').dialog({ ... open: function () { $(this).parent() .find("button:eq(0)") .focus() .keyup(function (e) { if (e.keyCode == $.ui.keyCode.ENTER) { $(this).trigger("click"); }; }); } });
由于在体上添加了对话框DIV，因此身体现在正在听键盘事件。 它testing了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; } }); }
因为我没有足够的声望发表评论。
$(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修改的答案也joinEscape来closures对话框。
它工作正常谢谢！
open: function () { debugger; $("#dialogDiv").keypress(function (e) { if (e.keyCode == 13) { $(this).parent().find("#btnLoginSubmit").trigger("click"); } }); },
