javascript - 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”阻止对话框关闭(如果成功，身份验证方法将找到并关闭它)。除此之外，它只是收集一些表单值并将它们一起发送。

问题是，因为按钮不是“提交”DOM 元素，所以它不会监听“Enter”键。老实说，这通常是一种祝福。但在这种特殊情况下(用户名/密码形式)，我一直凭直觉期望它使用“Enter”键提交。如果我尝试向表单添加提交按钮，视觉“词汇”的一致性就会丢失。按钮需要是对话框的一部分，而不是表单的一部分。

我可以在密码字段中添加一个监听器来监听回车键(代码 13):

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

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

Answer 1

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

为登录按钮添加一个类:

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

将监听器添加到模态本身(或者，在本例中，您注入(inject)的表单):

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

使用必要的 jsFiddle:https://jsfiddle.net/aLeqec2L/