我有一个带有表单的 jQuery UI 对话框。我想模拟对对话框按钮之一的单击,这样您就不必使用鼠标或标签。换句话说,我希望它像一个普通的 GUI 对话框一样模拟点击“确定”按钮。
我认为这可能是对话框的一个简单选项,但我在jQuery UI 文档中找不到它。我可以用 keyup() 绑定每个表单输入,但不知道是否有更简单/更干净的方法。谢谢。
我有一个带有表单的 jQuery UI 对话框。我想模拟对对话框按钮之一的单击,这样您就不必使用鼠标或标签。换句话说,我希望它像一个普通的 GUI 对话框一样模拟点击“确定”按钮。
我认为这可能是对话框的一个简单选项,但我在jQuery UI 文档中找不到它。我可以用 keyup() 绑定每个表单输入,但不知道是否有更简单/更干净的方法。谢谢。
我不知道jQuery UI 小部件中是否有一个选项,但您可以简单地将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");
}
});
};
});
我已经总结了上面的答案并添加了重要的内容
$(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()
或在if语句中调用一个函数'.ui-dialog'
我知道这个问题很老,但我有同样的需求,所以,我分享了我使用过的解决方案。
$('#dialogBox').dialog('open');
$('.ui-dialog-buttonpane > button:last').focus();
它与最新版本的 JQuery UI (1.8.1) 完美配合。您也可以使用 :first 而不是 :last ,具体取决于您要将哪个按钮设置为默认按钮。
与上面选择的解决方案相比,此解决方案的优点是可以向用户显示哪个按钮是默认按钮。用户还可以在按钮之间使用 TAB 键,然后按 ENTER 键将单击当前处于焦点下的按钮。
干杯。
一种使这项工作更通用的粗略但有效的方法:
$.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')
有一些方法可以改进它以使其在更特殊的情况下工作。使用上面的代码,它会自动选择对话框中的第一个按钮作为按下 enter 时触发的按钮。它还假设在任何给定时间只有一个活动对话,但情况可能并非如此。但是你明白了。
注意:如上所述,按下回车键的按钮取决于您的设置。因此,在某些情况下,您可能希望在 .find 方法中使用 :first 选择器,而在其他情况下,您可能希望使用 :last 选择器。
您可以绑定到对话框中表单的提交事件,而不是像在这个答案中那样侦听关键代码(我无法开始工作),然后执行以下操作:
$("#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');
}
}
});
请注意,不同的浏览器对回车键的处理方式不同,有些浏览器并不总是在回车时提交。