У меня есть диалоговое окно jQuery UI с формой. Я хотел бы имитировать щелчок на одной из кнопок диалога, поэтому вам не нужно использовать мышь или вкладку. Другими словами, я хочу, чтобы он работал как обычный графический интерфейс, где имитируется нажатие кнопки "ОК".
Я предполагаю, что это может быть простой вариант с диалоговым окном, но я не могу найти его в документации 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 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;
}
});
<сильные > Преимущества:
textarea
, select
, button
или входы с кнопкой типа, представьте себе, что пользователь нажимает кнопку ввода textarea
и получает форму, представленную вместо новой строки!document
и не свяжет обработчик с каждым диалогом, как в некотором коде выше, для большей эффективности$('<div><input type="text"/></div>').dialog({buttons: .});
:first
Неудобство:
Я знаю, что вопрос старый, но у меня была такая же потребность, поэтому я поделился решением, которое использовал
$('#dialogBox').dialog('open');
$('.ui-dialog-buttonpane > button:last').focus();
Он прекрасно работает с последней версией JQuery UI (1.8.1). Вы также можете использовать: сначала вместо: последний, в зависимости от того, какую кнопку вы хотите установить по умолчанию.
Это решение, по сравнению с выбранным выше, имеет преимущество, показывающее, какая кнопка является стандартной для пользователя. Пользователь также может TAB между кнопками и нажатием ENTER будет нажимать кнопку, находящуюся в настоящее время в фокусе.
Приветствия.
Вместо того, чтобы прослушивать ключевые коды, как в этом ответе (который я не мог заставить работать), вы можете привязываться к событию отправки формы в диалоговом окне, а затем сделать это:
$("#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');
}
}
});
Обратите внимание, что разные браузеры обрабатывают ключ ввода по-разному, а некоторые не всегда выполняют ввод при вводе.
Грубый, но эффективный способ сделать эту работу более общей:
$.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, а в других - использовать последний селектор.
Бен Клейтон является самым аккуратным и самым коротким, и его можно разместить в верхней части страницы индекса до того, как будут инициализированы все диалоговые окна jquery. Однако я хотел бы указать, что ".live" устарел. Предпочтительное действие теперь ".on". Если вы хотите, чтобы ".on" функционировал как ".live", вам нужно будет использовать делегированные события для присоединения обработчика события. Кроме того, еще несколько вещей...
Я предпочитаю использовать метод ui.keycode.ENTER для проверки ввода потому что вам не нужно запоминать фактический key code.
Использование кнопки $('. ui-dialog-buttonpane: first', $(this)) "для Click Select делает весь общий метод.
Вы хотите добавить "return false"; для предотвращения дефолта и остановки Распространение.
В этом случае...
$('body').on('keypress', '.ui-dialog', function(event) {
if (event.keyCode === $.ui.keyCode.ENTER) {
$('.ui-dialog-buttonpane button:first', $(this)).click();
return false;
}
});
Я не знаю про более простой, но обычно вы будете отслеживать, какая кнопка имеет текущий фокус. Если фокус будет изменен на другой элемент управления, тогда кнопка "фокус кнопки" останется на кнопке с фокусом в последний раз. Обычно кнопка "фокус кнопки" начинается с кнопки по умолчанию. Нажатие на другую кнопку изменит "фокус кнопки". Вам нужно будет решить, будет ли переходить к другому элементу формы reset "фокус кнопки" к кнопке по умолчанию. Вероятно, вам также понадобится какой-то визуальный индикатор, отличный от браузера по умолчанию, чтобы указать сфокусированную кнопку, поскольку она теряет реальный фокус в окне.
Когда у вас есть логика фокуса кнопки и реализована, я, вероятно, добавлю ключевой обработчик к самому диалогу и вызову его действие, связанное с текущей "сфокусированной" кнопкой.
РЕДАКТИРОВАТЬ. Я предполагаю, что вы хотите, чтобы у вас был шанс попасть в любое время, когда вы заполняете элементы формы и выполняете действие кнопки "текущее". Если вы хотите только такое поведение, когда кнопка действительно сфокусирована, мой ответ слишком сложный.
Иногда мы забываем о том, что поддерживает браузер:
<input type="submit" style="visibility:hidden" />
Это приведет к тому, что клавиша ENTER отправит форму.
Я нашел это решение, оно работает на 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();
});
Я надеюсь, что это поможет кому-нибудь.
Я понимаю, что есть много ответов уже, но я считаю, что мое решение является самым простым и, возможно, самым коротким. Это имеет то преимущество, что оно работает в любых диалоговых окнах, созданных в любое время в будущем.
$(".ui-dialog").live("keyup", function(e) {
if (e.keyCode === 13) {
$('.ok-button', $(this) ).first().click();
}
});
Это должно работать, чтобы вызвать щелчок обработчика щелчка кнопки. этот пример предполагает, что вы уже настроили форму в диалоговом окне, чтобы использовать плагин jquery.validate. но могут быть легко адаптированы.
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...
}
}
Я сделал такой путь...;) Надеюсь, это поможет кому-то.
$(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;
}
});
сделано и сделано
$('#login input').keyup(function(e) {
if (e.keyCode == 13) {
$('#login form').submit();
}
}
Вот что я сделал:
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 - это объект jQuery, содержащий форму html (обратите внимание, что там нет никаких тегов "формы"... если вы поместите их на весь экран, будет обновляться при нажатии "enter"),
Всякий раз, когда пользователь нажимает "enter" в форме, он будет эквивалентен нажатию кнопки "ok".
Это также позволяет избежать проблемы с открытием формы с уже выделенной кнопкой "ok". Хотя это было бы полезно для форм без полей, если вам нужно, чтобы пользователь заполнил материал, вы, вероятно, захотите выделить первое поле.
$('#DialogID').dialog("option", "buttons")["TheButton"].apply()
Это отлично поработало для меня.
$("#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();}
});
если вы знаете селектор элементов кнопки:
$('#dialogBox').dialog('open');
$('#okButton').focus();
Должен сделать трюк для вас. Это будет сфокусировано на кнопке ok и введите 'click', как и следовало ожидать. Это тот же метод, который используется в собственных диалоговых окнах интерфейса.
Потому что у меня недостаточно репутации для публикации комментариев.
$(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 также добавляет Escape для закрытия диалога.
Ниже тела используется, потому что диалог 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;
}
});
}
Ни одно из этих решений, похоже, не работало для меня в 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");
};
});
}
});
Я нашел довольно простое решение для этой проблемы:
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();
}
});
Он отлично работает Спасибо!
open: function () {
debugger;
$("#dialogDiv").keypress(function (e) {
if (e.keyCode == 13) {
$(this).parent().find("#btnLoginSubmit").trigger("click");
}
});
},