jQuery-UI Dialog: сделайте кнопку в диалоговом окне действием по умолчанию (введите ключ)

Мне нравится этот (он работает для меня), который оставляет Фокус, где я хотел быть (текстовое поле)

    $("#logonDialog").keydown(function (event) {
        if (event.keyCode == $.ui.keyCode.ENTER) {
            $(this).parent()
                   .find("button:eq(0)").trigger("click");
            return false;
        }
    });

однако это работает только для одной кнопки (кнопка Ok), при необходимости": eq(n) " может быть установлен для выбора другой кнопки.

Примечание: я добавил новую строку, возвращающую false, чтобы предотвратить пузырение событий при обработке ключа enter, я надеюсь, что это поможет лучше, чем раньше.

попробуйте так:

$("#myDialog").dialog({
    open: function() {
         $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus(); 
    }
});

этот другой вопрос stackoverflow должны получить вас, где вы хотите:

$('#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(); 
    }
});

самым простым способом было бы использовать действие отправки на форме в диалоговом окне, однако:

• Я не хотел требовать форму в диалоговом окне (N. B. разные браузеры обрабатывают ключ ввода по-разному, а некоторые не всегда делают отправку при вводе).
• Я хотел, чтобы это работало, если пользователь нажимает на панель заголовка или панель кнопок перед нажатием enter.
• Я хотел сделать библиотечный метод, который я могу использовать для любого jQueryUI диалог.

компания, в которой я работаю, - это "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() для поиска элемента button, всегда кажется мне гораздо лучшим выбором.

также явно ищет клавишу ввода для нажатия позволяет нам установить фокус на что угодно элемент, который мы хотим, когда диалог открывается при желании. Это просто позволяет обеспечить максимальную гибкость при удовлетворении желания запуска определенной кнопки в качестве "по умолчанию" при нажатии клавиши enter. Я также реализовал "отмена" по умолчанию, а также.

Я надеюсь, что это поможет другим, кто ищет хорошее решение кнопки "по умолчанию" для диалогов.

$("#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");
         }
      }
   ]
});

вы должны использовать: табулируемый селектор и индекс вашей кнопки (0-это кнопка [X], ваша началась с 1)

open: function() {
    var tb = $(":tabbable", this.parentNode);
    if(tb.length>1) {
        tb[1].focus();
    }
}