在<Enter>上提交jQuery UI對話框

Question

我有一個帶有表單的jQuery UI對話框。 我想模擬對話框的其中一個按鈕，這樣你就不必使用鼠標或標簽了。 換句話說，我希望它像常規GUI對話框一樣，模擬點擊“確定”按鈕。

我假設這可能是對話框的一個簡單選項，但我在jQuery UI文檔中找不到它。 我可以使用keyup（）綁定每個表單輸入，但不知道是否有更簡單/更清晰的方式。 謝謝。

Answer 1

我不知道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");
      }
    });
  };
});

Answer 2

我總結了上面的答案，並添加了重要的東西

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

好處：

1. 禁止在非兼容元素上輸入鍵，例如textarea ， select ， button或帶有類型按鈕的輸入，想象用戶點擊textarea輸入並獲取提交表單而不是獲取新行！
2. 綁定完成一次，避免使用對話框'open'回調綁定回車鍵，以避免每次對話'打開'時反復綁定相同的功能
3. 避免更改現有代碼，如上面的一些答案所示
4. 使用'delegate'而不是棄用'live'並避免使用新的'on'方法來允許使用舊版本的jquery
5. 因為我們使用委托，這意味着甚至可以在初始化對話之前編寫上面的代碼。 即使沒有$(document).ready你也可以將它放在head標簽中
6. 委托只會將一個處理程序綁定到document並且不會像上面某些代碼那樣將處理程序綁定到每個對話框，以提高效率
7. 甚至可以使用動態生成的對話框，例如$('<div><input type="text"/></div>').dialog({buttons: .});
8. 使用ie 7/8/9！
9. 避免使用慢速選擇器:first
10. 避免使用答案黑客一樣在這里做一個隱藏的提交按鈕

缺點：

1. 運行第一個按鈕作為默認按鈕，您可以選擇另一個帶有eq()按鈕或在if語句中調用一個函數
2. 所有對話框都具有相同的行為，您可以通過使選擇器更具體來過濾它，即'#dialog'而不是'.ui-dialog'

我知道這個問題很老但我有同樣的需求，所以，我分享了我用過的解決方案。

Answer 3

$('#dialogBox').dialog('open');
$('.ui-dialog-buttonpane > button:last').focus();

它與最新版本的JQuery UI（1.8.1）完美配合。 您也可以使用：first而不是：last取決於您要將哪個按鈕設置為默認值。

與上面選擇的解決方案相比，該解決方案具有顯示哪個按鈕是用戶的默認按鈕的優點。 用戶還可以在按鈕之間選擇並按ENTER鍵將單擊當前處於焦點下的按鈕。

干杯。

Answer 4

一種粗略但有效的方法可以使這項工作更加通用：

$.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方法中使用：first選擇器，而在其他情況下，您可能希望使用：last選擇器。

Answer 5

而不是像在這個答案（我無法工作）中那樣監聽密鑰代碼，你可以在對話框中綁定到表單的submit事件，然后執行以下操作：

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

請注意，不同的瀏覽器以不同的方式處理輸入鍵，有些瀏覽器並不總是在輸入時進行提交。

Answer 6

Ben Clayton是最新和最短的，它可以在任何jquery對話框初始化之前放在索引頁面的頂部。 但是，我想指出“.live”已被棄用。 首選操作現在是“.on”。 如果您希望“。on”的功能類似於“.live”，則必須使用委派事件來附加事件處理程序。 還有一些其他的東西......

1. 我更喜歡使用ui.keycode.ENTER方法來測試回車鍵，因為您不必記住實際的密鑰代碼。

2. 對單擊選擇器使用“$（'。ui-dialog-buttonpane按鈕：first'，$（this））”使整個方法通用。

3. 你想添加“return false;” 防止默認和停止傳播。

在這種情況下...

$('body').on('keypress', '.ui-dialog', function(event) { 
    if (event.keyCode === $.ui.keyCode.ENTER) { 
        $('.ui-dialog-buttonpane button:first', $(this)).click();
        return false;
    }
});

Answer 7

我不知道更簡單，但通常你會跟蹤哪個按鈕具有當前焦點。 如果焦點更改為不同的控件，則“按鈕焦點”將保留在最后焦點的按鈕上。 通常，“按鈕焦點”將從默認按鈕開始。 按Tab鍵切換到另一個按鈕將改變“按鈕焦點”。 您必須決定導航到其他表單元素是否會再次將“按鈕焦點”重置為默認按鈕。 您可能還需要一些除瀏覽器默認值之外的可視指示器來指示聚焦按鈕，因為它會失去窗口中的真實焦點。

一旦你按下了按鈕焦點邏輯並實現了，那么我可能會給對話框本身添加一個鍵處理程序，並讓它調用與當前“聚焦”按鈕相關的動作。

編輯 ：我假設您希望能夠在填寫表單元素的任何時候點擊輸入並使“當前”按鈕操作優先。 如果您只是在按鈕實際聚焦時只想要這種行為，我的答案就太復雜了。

Answer 8

我找到了這個解決方案，它適用於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();
});

我希望它可以幫助任何人。

Answer 9

有時我們會忘記瀏覽器已經支持的基礎：

<input type="submit" style="visibility:hidden" />

這將導致ENTER鍵提交表單。

Answer 10

我這樣做...;）希望它對某人有幫助..

$(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 11

這應該可以觸發單擊按鈕的單擊處理程序。 此示例假定您已在對話框中設置表單以使用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...

            }
}

Answer 12

完成並完成

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

Answer 13

我意識到已經有很多答案，但我自然認為我的解決方案是最好的，也可能是最短的。 它的優點是它適用於將來任何時候創建的任何對話框。

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

Answer 14

這是我做的：

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是一個包含表單的html的jQuery對象（注意，那里沒有任何“表單”標簽...如果你把它們放在整個屏幕上，當你按“enter”時會刷新）。

每當用戶從表單中按“輸入”時，它將等同於單擊“確定”按鈕。

這也避免了在已經突出顯示“ok”按鈕的情況下打開表單的問題。 雖然這對沒有字段的表單很有用，但如果您需要用戶填寫內容，那么您可能希望突出顯示第一個字段。

Answer 15

在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 16

使用下方的body是因為對話框DIV添加在body上，所以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; 
     }
  }); 
}

Answer 17

因為我沒有足夠的聲譽發表評論。

$(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 18

   $("#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 19

我發現了一個非常簡單的解決方案：

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 20

$('#DialogID').dialog("option", "buttons")["TheButton"].apply()

這對我很有用..

Answer 21

如果您知道按鈕元素選擇器：

$('#dialogBox').dialog('open');
$('#okButton').focus();

應該為你做的伎倆。 這將關注確定按鈕，然后輸入將“點擊”它，如您所料。 這與本機UI對話框中使用的技術相同。

Answer 22

它工作正常謝謝！

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

Answer 23

給你的按鈕類並按常規方式選擇它們：

$('#DialogTag').dialog({
  closeOnEscape: true,
  buttons: [
    {
      text: 'Cancel',
      class: 'myCancelButton',
      click: function() {
        // Close dialog fct
      }
    },
    {
      text: 'Ok',
      class: 'myOKButton',
      click: function() {
        // OK fct
      }
    }
  ],
  open: function() {

    $(document).keyup(function(event) {

      if (event.keyCode === 13) {
        $('.myOKButton').click();
      }

    });

  }
});