Отправить диалоговое окно jQuery UI на <Enter>

Question

У меня есть диалоговое окно jQuery UI с формой. Я хотел бы смоделировать нажатие на одну из кнопок диалогового окна, чтобы вам не приходилось использовать мышь или вкладку к ней. Другими словами, я хочу, чтобы он действовал как обычное диалоговое окно с графическим интерфейсом, где имитирует нажатие кнопки «ОК».

Я предполагаю, что это может быть простой вариант с диалоговым окном, но я не могу найти его в документации jQuery UI . Я мог связать каждый ввод формы с помощью keyup (), но не знал, существует ли более простой / понятный способ. Спасибо.

Answer 1

Я так и сделал ...;) Надеюсь, это кому-нибудь поможет ...

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

Answer 2

сделано и сделано

  $('#login input').keyup(function(e) {
      if (e.keyCode == 13) {
          $('#login form').submit();
      }
   }

Answer 3

Вот что я сделал:

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» обновится) ,

Всякий раз, когда пользователь нажимает «ввод» из формы, это будет эквивалентно нажатию кнопки «ОК».

Это также позволяет избежать открытия формы с уже выделенной кнопкой «ОК». Хотя это было бы хорошо для форм без полей, если вам нужно, чтобы пользователь заполнил заполнение, вы, вероятно, захотите выделить первое поле.

Answer 4

Я понимаю, что ответов уже много, но, естественно, считаю, что мое решение самое лучшее и, возможно, самое короткое. Он имеет преимущество в том, что работает с любыми диалоговыми окнами, созданными в любое время в будущем.

$(".ui-dialog").live("keyup", function(e) {
    if (e.keyCode === 13) {
        $('.ok-button', $(this) ).first().click();
    }
});

Answer 5

Я нашел довольно простое решение для этой проблемы:

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

Answer 6

Похоже, что ни одно из этих решений не помогло мне в 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");
                   };
               });
    }
});

Answer 7

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

Answer 8

Потому что у меня недостаточно репутации, чтобы оставлять комментарии.

$(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, чтобы закрыть диалог.

Answer 9

отлично работает Спасибо !!!

open: function () { debugger; $("#dialogDiv").keypress(function (e) { if (e.keyCode == 13) { $(this).parent().find("#btnLoginSubmit").trigger("click"); } }); },

Answer 10

Используется ниже body, потому что в теле добавлен диалог DIV, поэтому body теперь слушает событие клавиатуры. Он тестировался на 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; 
     }
  }); 
}