Bootbox「確認」回撥輸入

我使用Bootbox.js（http://bootboxjs.com/）在我的應用程序中彈出窗體。 Bootbox有一個API，用於指定您可以選擇添加到對話框的任何自定義按鈕的回調。例如，下面是被傳遞到Bootbox一個選擇對象：Bootbox「確認」回撥輸入

var dialogOptions = { 
    message: bodyMessage, 
    className: uniqueClass, 
    closeButton: false, 
    onEscape: false, 
    title: i18n.t("common.loginHeader"), 
    buttons: { 
     login: { 
     label: i18n.t("common.signIn"), 
     className: "btn btn-success ", 
     callback: function() { 
      var user = $("#username").val(); 
      var password = $("#password").val(); 
      var toEncode = user + ":" + password; 
      fcr.api.authorization(window.btoa(toEncode), successCallback, errorCallback); 
      return false; 
     } 
     } 
    } 
    };

正如您可以猜到，這是一個身份驗證對話框。回調中的「返回false」會阻止對話框關閉（如果成功，認證方法將查找並關閉它）。除此之外，它只是收集一些表單值並將它們一起發送。

問題是，由於該按鈕不是「Submit」DOM元素，因此它不會偵聽「Enter」鍵。說實話，這通常是一種祝福。但在這個特殊情況下（用戶名/密碼錶單），我總是直覺地期望它用「Enter」鍵提交。如果我嘗試向表單添加Submit按鈕，則視覺「詞彙表」的一致性將丟失。該按鈕需要成爲對話框的一部分，而不是表單的一部分。

我可以添加一個偵聽偵聽回車鍵（代碼13）密碼字段：

$('#password').keypress(function(e) { 
    if(e.which == 13) { 
    // do the submit? 
    } 
});

但它似乎有點劈十歲上下。而且我必須將回調抽象爲某種行爲方法，以便任何活動都可以調用它。不一定是壞事，但我不會在其他地方需要該功能，所以它似乎是我可以避免給出替代方案的抽象。這是完成任務的唯一方式，還是有人知道更優雅的東西？

來源

2015-10-26 Greg Pettit

模態內容是否具有表單元素？ –

是的，泰森。 –

我不知道，我把它叫做優雅，但一個可能性是你的按鍵偵聽器添加到一個更高的父母，然後觸發登錄按鈕的點擊事件：

添加類的登錄按鈕：

login: { 
    className: "btn btn-success login-btn", 
}

的偵聽器添加到該模式本身（或者，在這種情況下，你注射的形式）：

$('.' + uniqueClass + ' form').on('keypress', function(e) { 
    if(e.which == 13) { 
     $('.login-btn').trigger('click'); 
    } 
});

具備必要的jsfiddle：https://jsfiddle.net/aLeqec2L/

來源

2015-10-29 05:17:30

這是一個普遍正確的答案，我很欣賞你的時間。最後，表單實際上是在DOM中（我將它們存儲在其他地方，並將它們放到對話框中），並且對話框即時創建。所以，如果我只是綁定到#password字段（每個問題）或表單（根據您的示例，但沒有模式的獨特類）作爲偵聽器，可以工作。我最終綁定了表單，專門在密碼字段上監聽密鑰。我將把這個問題歸結爲一個答案，但保持這個接受。 –

泰森的迴應是通用和正確的。最後，我修改了一下以適應我的具體目的。通用的答案是更適合未來的用戶尋找一個答案，但爲後人這裏是我的代碼：

$('#loginForm').on('keyup', '#passwordInputField', function(e) { 
    if (e.which === 13) { 
    $('.credentialSubmitButton').trigger('click'); 
    } 
});

我在頁面上一個loginForm和passwordInputField。

我更新了Bootbox.js對話框以向我的按鈕添加一個類;更新後的對話框現在包含buttons.login.className，值爲'btn-success credentialSubmitButton'。我使用這個額外的類作爲一個獨特的選擇器，這是有點危險的，但沒有真正的選擇，因爲Bootbox.js不允許爲按鈕指定一個ID，據我所知。

有很多更緊密的耦合和唯一標識符比我更喜歡。我寧願在Bootbox定義內部發生緊密耦合（如果封裝合適，緊密耦合是可以的），因此我尋求更「優雅」的解決方案。但是，這工作。它的工作。

來源

2015-10-30 14:45:17

Bootbox「確認」回撥輸入

回答

相關問題