在<输入器上提交 jQuery UI 对话框>
2022-08-30 04:33:46
我有一个带有表单的jQuery UI对话框。我想模拟单击对话框的按钮之一,这样您就不必使用鼠标或选项卡。换句话说,我希望它像一个常规的GUI对话框,模拟点击“确定”按钮。
我假设这可能是对话框的一个简单选项,但我在jQuery UI文档中找不到它。我可以用keyup()绑定每个表单输入,但不知道是否有更简单/更干净的方法。谢谢。
我有一个带有表单的jQuery UI对话框。我想模拟单击对话框的按钮之一,这样您就不必使用鼠标或选项卡。换句话说,我希望它像一个常规的GUI对话框,模拟点击“确定”按钮。
我假设这可能是对话框的一个简单选项,但我在jQuery UI文档中找不到它。我可以用keyup()绑定每个表单输入,但不知道是否有更简单/更干净的方法。谢谢。
我不知道jQuery UI小部件中是否有选项,但您可以简单地将事件绑定到包含对话框的div...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");
}
});
};
});
我已经总结了上面的答案并添加了重要的东西
$(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
$(document).ready
document
$('<div><input type="text"/></div>').dialog({buttons: .});
:first
弊:
eq()
'.ui-dialog'
我知道这个问题很老,但我也有同样的需求,所以,我分享了我使用过的解决方案。