В модальном диалоговом окне jquery есть способ выбрать кнопку в качестве действия по умолчанию (действие, которое нужно выполнить, когда пользователь нажимает кнопку ввода)?
Пример веб-сайта jquery: текстовое сообщение диалога jquery
В приведенном выше примере диалог закрывается, когда пользователь нажимает Esc. Я хотел бы, чтобы действие кнопки "ОК" вызывалось, когда пользователь нажимает Enter.
В открывшемся диалоговом окне вы можете сфокусировать кнопку:
$("#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;
}
});
Однако, это работает только для одной кнопки (кнопка Ok), если необходимо ': eq (n)' может быть настроен на выбор другой кнопки.
Примечание.. Я добавил новую строку, возвращающую значение false, чтобы предотвратить барботирование событий при обработке ключа ввода. Надеюсь, это поможет лучше, чем раньше.
попробуйте следующим образом:
$("#myDialog").dialog({
open: function() {
$(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus();
}
});
fooobar.com/questions/47507/... должен получить вас там, где вы хотите:
$('#DialogTag').keyup(function(e) {
if (e.keyCode == 13) {
//Close dialog and/or submit here...
}
});
Другая опция, которая дает вам больше контроля над всеми кнопками в диалоговом окне, заключается в том, чтобы добавить их в виде массива кнопок. Затем в открытом событии вы можете получить кнопки по id и делать все, что хотите (в том числе установить фокус)
$('#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();
}
});
Небольшое отклонение от использования названия кнопок в качестве селектора. Он читает немного лучше, но есть очевидное дублирование с текстовой строкой кнопки. Рефакторинг по вкусу.
$("#confirm-dialog").dialog({
buttons: {
"Cancel" : function(){},
"OK" : function(){}
},
open: function() {
$(this).siblings('.ui-dialog-buttonpane').find("button:contains('OK')").focus();
}
});
Самый простой способ - использовать действие отправки в форме внутри диалогового окна:
Компания, над которой я работаю, является "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, если вы используете динамически созданный div и уничтожаете его впоследствии.
Ниже вы можете увидеть, как я использую эти функции библиотеки при инициализации нединамического диалога...
$('#divName').dialog({
//...
open: function (event, ui) { EBL.onUiDialogOpen(event, ui, false, true); },
close: function (event, ui) { EBL.onUiDialogClose(event, ui); },
//...
});
До сих пор я тестировал это в IE9 и последнем chrome/firefox. Вы должны проверить диалог как необходимый в своей функции "Ok".
Я использую версию 1.10.0. Я не мог заставить его работать с открытым, но сфокусированным. Эта кнопка фокусируется на второй кнопке:
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;
}
});
},
дополнительные параметры...
Этот простой фрагмент кода стилирует ваши кнопки и устанавливает значение по умолчанию для последнего:
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();
},
В моем случае ни один из ответов не работал, потому что я вызвал .dialog на пустой div и добавил мои кнопки динамически, поэтому $(this).html() ничего не вернет. Поэтому я не мог вызывать методы типа parent() или siblings() и ожидать чего-то взамен. То, что я сделал, это выбрать класс ui-dialog-buttonpane непосредственно и найти элемент кнопки оттуда
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
Я знаю, что это старый поток, но я искал эту точную функциональность и смог реализовать то, что, по моему мнению, является лучшим решением, поскольку я нашел все вышеперечисленное немного короче.
Это комбинация двух ответов выше. Использование идентификатора, а не полагаться на функцию find(), чтобы найти элемент кнопки, всегда кажется мне гораздо лучшим выбором.
Также явно поиск клавиши ввода, которую нужно нажать, позволяет нам установить фокус на любой элемент, который мы хотим, когда диалог будет открыт, если потребуется. Это, по-видимому, обеспечивает максимальную гибкость при удовлетворении желания запуска конкретной кнопки в качестве "по умолчанию" при нажатии клавиши ввода. Я также внедрил "отмену" по умолчанию.
Я надеюсь, что это поможет другим людям найти хорошее решение по умолчанию для диалогов.
$("#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");
}
}
]
});
Вам следует использовать: tabbable селектор и индекс вашей кнопки (0 - кнопка [X], ваша начата с 1)
open: function() {
var tb = $(":tabbable", this.parentNode);
if(tb.length>0) {
tb[1].focus();
}
}