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

小开

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

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

应该能帮到你。这将集中确定按钮，并输入将’点击’它，正如您所期望的。这与本机 UI 对话框中使用的技术相同。

小开

我不知道是否更简单，但通常您会跟踪哪个按钮具有当前焦点。如果焦点被更改为另一个控件，那么“按钮焦点”将保留在最后拥有焦点的按钮上。通常，“按钮焦点”将开始在您的默认按钮。选择不同的按钮会改变“按钮焦点”。您必须决定导航到不同的表单元素是否会再次将“按钮焦点”重置为默认按钮。您可能还需要一些浏览器默认值以外的可视化指示器来指示已聚焦按钮，因为它在窗口中失去了真正的焦点。

一旦您关闭并实现了按钮焦点逻辑，那么我可能会向对话框本身添加一个键处理程序，并让它调用与当前“焦点”按钮相关联的操作。

编辑 : 我假设您希望在填写表单元素的任何时候都能够输入，并且“当前”按钮操作具有优先权。如果你只想在按钮确实聚焦的时候有这种行为，我的回答就太复杂了。

小开

最佳答案

我不知道在 JQuery UI widget 中是否有一个选项，但是您可以简单地将 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");
}
});
};
});

小开

一个粗糙但有效的方法使这种工作更普遍:

$.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 方法，而在其他情况下，您可能希望使用: last 选择器。

小开

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

它与最新版本的 JQueryUI (1.8.1)非常协调。您还可以使用: first 代替: last，这取决于您想将哪个按钮设置为默认按钮。

与上面选择的解决方案相比，这个解决方案的优点是显示哪个按钮是用户的默认按钮。用户还可以选择按钮之间的 TAB，按 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;
}
});

小开

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

小开

这将触发按钮的单击处理程序的单击。这个示例假设您已经在对话框中设置了表单以使用 jquery.validplugin。但很容易适应。

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...


}
}

小开

对于这个问题，我找到了一个相当简单的解决办法:

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

小开

而不是像在这个答案中那样听取关键代码(我无法做到这一点) ，你可以绑定到对话框中表单的提交事件，然后执行以下操作:

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

请注意，不同的浏览器处理输入键的方式不同，有些浏览器并不总是在输入时执行提交操作。

小开

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

这对我很有用。

小开

我意识到已经有很多答案了，但我自然而然地认为我的解决方案是最简洁的，可能也是最短的。它的优点是可以在将来任何时候创建的任何对话框上工作。

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

小开

我是这么做的:

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”时将刷新它们)。

每当用户从表单中按下“回车”键时，就相当于点击了“确定”按钮。

这也避免了在打开表单时突出显示“ ok”按钮的问题。虽然这对于没有字段的表单来说是好的，但是如果您需要用户填充内容，那么您可能希望突出显示第一个字段。

小开

Ben Clayton 是最简洁和最短的，它可以在任何 jquery 对话框初始化之前放置在索引页面的顶部。然而，我想指出的是。已经被否决了。首选行动是现在。”。开始。如果你愿意的话”。“功能相似”。“ live”，则必须使用委托的事件来附加事件处理程序。还有一些其他的事情..。

我更喜欢使用 ui.keycode.ENTER 方法来测试输入因为你不需要记住实际的密钥代码。
对象使用“ $(’. ui-氮对话框-按钮: first’，$(this))” 单击选择器使整个方法变得通用
您需要添加“ return false;”以防止默认和停止传播

在这种情况下。

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

小开

这些解决方案似乎都不适合我在 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");
};
});
}
});

小开

我总结了上面的答案并补充了一些重要的东西

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

优点:

不允许输入键对不兼容的元素，如 textarea，select，button或输入类型按钮，想象用户点击进入 textarea，并得到表单提交，而不是得到新的一行！
绑定完成一次，避免使用对话框“打开”回调来绑定输入键，以避免在每次对话框“打开”时一次又一次地绑定相同的函数
避免像上面的一些答案所建议的那样改变现有的代码
使用’委托’而不是不推荐的’活’和避免使用新的’在’方法，以允许工作与旧版本的 jquery
因为我们使用委托，这意味着甚至可以在初始化对话框之前编写上面的代码。你也可以把它在头标签即使没有 $(document).ready
另外，为了更有效率，委托将只绑定一个处理程序到 document，而不会像上面的一些代码那样将处理程序绑定到每个对话框
甚至可以使用动态生成的对话框，如 $('<div><input type="text"/></div>').dialog({buttons: .});
和7/8/9一起工作！
避免使用慢速选择器 :first
避免使用黑客喜欢在答案给你作出一个隐藏的提交按钮

缺点:

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

我知道这个问题很老了，但我也有同样的需求，所以，我分享了我使用的解决方案。

小开

我找到了这个解决方案，它可以在 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键提交表单。

小开

很好用，谢谢! ! ！

函数(){ 调试器; $(“ # dialogDiv”) . keypress (function (e){ 如果(e.keyCode = = 13){ $(this) . rent () . find (“ # btnLoginSubmit”) . touch (“ click”) ; } }); } ，

小开

使用下面的主体是因为在主体上添加了对话框 DIV，所以主体现在监听键盘事件。它在 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也添加在逃逸关闭对话框。

小开

给你的按钮课程和选择他们通常的方式:

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


});


}
});