Bootbox "confirm" 回车回调

Question

我使用 Bootbox.js (http://bootboxjs.com/) 在我的应用程序中弹出表单。 Bootbox 有一个 API 用于指定您可以选择添加到对话框的任何自定义按钮的回调。例如，这是一个传递到 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;
        }
      }
    }
  };

如您所料，这是一个身份验证对话框。回调中的 "return false" 阻止对话框关闭（如果成功，身份验证方法将找到并关闭它）。除此之外，它只是收集一些表单值并将它们一起发送。

事实是，由于按钮不是 "Submit" DOM 元素，它不会监听 "Enter" 键。老实说，这通常是一种祝福。但在这个特殊情况下（username/password 表单），我一直凭直觉期望它使用 "Enter" 键提交。如果我尝试向表单添加提交按钮，视觉 "vocabulary" 的一致性就会丢失。按钮需要是对话框的一部分，而不是表单的一部分。

我可以在密码字段中添加一个侦听器以侦听回车键（代码 13）：

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

但这似乎有点老套。而且我必须将回调抽象为某种操作方法，以便 activity 中的任何一个都可以调用它。不一定是坏事，但我在其他任何地方都不需要这个功能，所以它似乎是一个抽象，我可以避免给定一个替代方案。这是完成任务的唯一方法，还是有人知道更优雅的方法？

Answer 1

我不知道我会称之为优雅，但一种可能是将您的按键侦听器添加到更高级别的父级，然后触发登录按钮的点击事件：

在登录按钮上添加一个class：

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/

Answer 2

Tieson 的回答是通用且正确的。最后，我对其进行了一些修改以适合我的特定目的。通用答案更适合未来寻找答案的用户，但对于后代来说，这是我的代码：

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

我在页面上有一个 loginForm 和 passwordInputField。

我更新了 Bootbox.js 对话框，为我的按钮添加了 class；更新后的对话框现在包含 buttons.login.className，值为“btn-success credentialSubmitButton”。我将这个额外的 class 用作唯一选择器，这有点冒险，但没有真正的选择，因为据我所知 Bootbox.js 不允许为按钮指定 ID。

有很多比我想要的更紧密的耦合和唯一标识符。我宁愿在 Bootbox 定义内部发生紧密耦合（正确封装时紧密耦合是可以的）因此我寻求更多 "elegant" 解决方案。但这有效。它完成了它的工作。

Bootbox "confirm" 回车回调

Bootbox "confirm" callback on hitting enter

javascript

bootbox