在 <Enter> 上提交 jQuery UI 对话框 [英] Submit jQuery UI dialog on <Enter>
问题描述
我有一个带有表单的 jQuery UI 对话框.我想模拟对对话框按钮之一的单击,这样您就不必使用鼠标或标签.换句话说,我希望它像一个普通的 GUI 对话框一样模拟点击确定"按钮.
I have a jQuery UI dialog box with a form. I would like to simulate a click on one of the dialog's buttons so you don't have to use the mouse or tab over to it. In other words, I want it to act like a regular GUI dialog box where simulates hitting the "OK" button.
我认为这可能是对话框的一个简单选项,但我在 jQuery UI 中找不到它文档.我可以用 keyup() 绑定每个表单输入,但不知道是否有更简单/更干净的方法.谢谢.
I assume this might be a simple option with the dialog, but I can't find it in the jQuery UI documentation. I could bind each form input with keyup() but didn't know if there was a simpler/cleaner way. Thanks.
推荐答案
我不知道 jQuery UI 小部件 中是否有选项,但您可以简单地将 keypress
事件绑定到包含对话框的 div...
I don't know if there's an option in the jQuery UI widget, but you could simply bind the keypress
event to the div that contains your dialog...
$('#DialogTag').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
//Close dialog and/or submit here...
}
});
无论您的对话框中的哪个元素具有焦点,这都会运行,这取决于您想要什么,这可能是也可能不是一件好事.
This'll run no matter what element has the focus in your dialog, which may or may not be a good thing depending on what you want.
如果你想让它成为默认功能,你可以添加这段代码:
If you want to make this the default functionality, you can add this piece of code:
// 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;
}
});
}
});
以下是其外观的更详细视图:
Here's a more detailed view of what it would look like:
$( "#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");
}
});
};
});
这篇关于在 <Enter> 上提交 jQuery UI 对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!