jquery-ui对话框：在对话框中按下默认的动作（回车键）
在jQuery模式对话框中，有没有办法select一个button作为默认的动作（当用户按下Enter键时执行的动作）？
jquery网站示例： jquery对话框模态消息
在上面的例子中，当用户按下Esc时，对话框closures。 我想在用户按下Enter键时调用“OK”button动作。
在对话框的打开function中，您可以将button对焦：
$("#myDialog").dialog({ open: function() { $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus(); } }); 更改:eq(0)如果它位于不同的索引处，或者按名称查找等
我喜欢这个（它为我工作），这留下了我想成为的焦点（一个文本框）
$("#logonDialog").keydown(function (event) { if (event.keyCode == 13) { $(this).parent() .find("button:eq(0)").trigger("click"); return false; } });
但是，这只是一个button（Okbutton），如果需要'：eq（n）'可以设置为select其他button。
注意：我添加了一个返回false的新行来防止事件冒泡，当input键被处理时，我希望它比以前有所帮助。
试试这个方法：
$("#myDialog").dialog({ open: function() { $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus(); } });
这个其他的stackoverflow问题应该让你在你想要的地方：
$('#DialogTag').keyup(function(e) { if (e.keyCode == 13) { //Close dialog and/or submit here... } });
另一个可以让你更好地控制对话框中所有button的选项是将它们添加为一组button。 然后在打开的事件中，你可以通过id获得button，并做你想做的任何事情（包括设置焦点 ）
$('#myDialog').dialog({ buttons: [ { id: "btnCancel", text: "Cancel", click: function(){ $(this).dialog('close'); } }, { id: "btnOne", text: "Print One", click: function () { SomeFunction(1); } }, { id: "btnTwo", text: "Print Two", click: function(){ SomeFunction(0); } } ], open: function () { if ($('#hiddenBool').val() != 'True') { $('#btnOne').hide(); } $("#btnTwo").focus(); } });
使用button名称作为select器的细微变化。 它读得更好一些，但与button文本string有明显的重复。 重构品味。
$("#confirm-dialog").dialog({ buttons: { "Cancel" : function(){}, "OK" : function(){} }, open: function() { $(this).siblings('.ui-dialog-buttonpane').find("button:contains('OK')").focus(); } });
最简单的方法是在对话框中的表单上使用提交操作，但是：
- 我不想在对话框中要求一个表单（注意不同的浏览器处理input键的方式不同，有些并不总是在input时进行提交）。
- 我希望这个工作，如果用户点击标题窗格或button窗格之前按下input。
- 我想做一个库方法，我可以使用任何jQueryUI对话框。
我工作的公司是'EBL'，我避免了全球范围…因此下面的函数的前缀：
EBL.onUiDialogOpen = function (event, ui, hideX, actionFirstButtonOnEnterKey) { if (hideX) { // There is no option to hide the 'X' so override. $(".ui-dialog-titlebar-close").hide(); } if (actionFirstButtonOnEnterKey) { /* (event.target) will give the div that will become the content of a UI dialog, once div is 'opened' is it surrounded by a parent div that contains title and buttonpane divs as well as content div - so I use .parent() ...The keyup function is binded to all descendants, therefore: -We need the e.stopPropagation() line. -This code is NOT what you want if you DON'T want enter key to initiate first button regardless of selected control. */ $(event.target).parent().bind('keydown.justWhileOpen', function (e) { if (e.keyCode === $.ui.keyCode.ENTER) { e.stopPropagation(); $(event.target).next('.ui-dialog-buttonpane') .find('button:first').click(); } }); } };
…结合使用：
EBL.onUiDialogClose = function (event, ui) { // Remove keyup handler when we close dialog $(event.target).parent().unbind('.justWhileOpen'); };
你不需要.onUiDialogClose，如果你正在使用一个dynamic创build的div，然后销毁它。
您可以在下面看到如何使用这些库函数初始化非dynamic对话框时…
$('#divName').dialog({ //... open: function (event, ui) { EBL.onUiDialogOpen(event, ui, false, true); }, close: function (event, ui) { EBL.onUiDialogClose(event, ui); }, //... });
到目前为止，我已经在IE9和最新的Chrome / Firefox中testing了这个。 你应该在你的'OK'函数中validation对话框的必要性。
我正在使用版本1.10.0。 我不能让它与开放工作，但重点。 这关注第二个button：
focus: function(){ $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus(); }
$("#logonDialog").keydown(function (event) {if (event.keyCode == 13) { $(this).parent().find("button:eq(0)").trigger("click"); return false; } });
这对我使用jQuery 1.10.2的对话框中工作
dialog({ focus: function() { $(this).on("keyup", function(e) { if (e.keyCode === 13) { $(this).parent().find("button:eq(1)").trigger("click"); return false; } }); },
更多的select…
这个简单的代码样式您的button，并将默认设置为最后一个：
open: function(){ $buttonPane = $(this).next(); $buttonPane.find('button:first').addClass('accept').addClass('ui-priority-secondary'); $buttonPane.find('button:last').addClass('cancel').addClass('ui-state-default'); $buttonPane.find('button:last').focus(); },
在我的情况下，没有任何答案工作，因为我在一个空的div上调用.dialog并dynamic地添加我的button，所以$(this).html()将不会返回任何内容。 所以我不能调用像parent()或者siblings()并期望返回一些东西。 我所做的是直接selectui-dialog-buttonpane类，并从那里findbutton元素
HTML
<div id = "dialogexample"> </div>
jQuery的
$("#dialogexample").dialog({ autoOpen: false, modal: true, open: function () { $('.ui-dialog-buttonpane').find('#otherbutton').focus(); } }); var buttons = { "MyButton" : { text: "Do Stuff", id: "dostuffbutton" }, "OtherButton" : { text: "Other Stuff", id: "otherbutton" } } $("#dialogexample").dialog("option", "buttons", buttons); $("#dialogexample").dialog("open"); //the second (otherbutton), instead of //the first (dostuffbutton) button should be focused
我知道这是一个古老的线程，但我正在寻找这个确切的function，并能够实现我认为是最好的解决scheme，因为我发现上述所有有点不足。
这是上面两个答案的组合。 使用一个ID而不是依靠find（）函数来查找button元素对我来说似乎总是一个更好的select。
也明确地寻找被按下的回车键允许我们将焦点设置为当对话被打开时我们想要的任何元素。 这似乎允许最大的灵活性，同时满足按下回车键时触发特定button作为“默认”的愿望。 我也实施了“取消”默认。
我希望这可以帮助其他人寻找对话框的“默认”button解决scheme。
$("#LoginBox").dialog({ open: function(){ $(this).keydown(function (event) { if (event.keyCode == 13) { $("#LogInButton").trigger("click"); return false; } if (event.keyCode == 27) { $("#CancelButton").trigger("click"); return false; } }); }, close: function(){ $(this).dialog("destroy"); }, buttons: [ { id: "LogInButton", text: "Log In", click: function(){ //button functionality goes here $(this).dialog("destroy"); } }, { id: "CancelButton", text: "Cancel", click: function(){ $(this).dialog("destroy"); } } ] });
