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“确认”回拨输入

回答

相关问题