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”键提交。如果我尝试向表单添加“提交”按钮，则视觉“词汇表”的一致性将丢失。该按钮需要是对话框的一部分，而不是表单的一部分。

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

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

但它似乎有些黑客攻击。而且我必须将回调抽象为某种行为方法，以便任何一个活动都可以调用它。不一定是坏事，但我不会在任何其他地方需要这个功能，所以它似乎是一个抽象，我可以避免给予替代。这是完成任务的唯一途径，还是有人知道更优雅的事情？

Answer 1

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

在登录按钮中添加一个类：

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对话框，为我的按钮添加了一个类;更新的对话框现在包含buttons.login.className，其值为“ btn-success credentialSubmitButton ”。我正在使用这个额外的类作为一个独特的选择器，这有点冒险但是没有真正的选择，因为Bootbox.js不允许为按钮指定ID，据我所知。

与我希望的相比，有更多更紧密的耦合和唯一标识符。我宁愿在Bootbox定义中发生紧密耦合（紧密耦合在正确封装时也可以），因此我寻求更“优雅”的解决方案。但这很有效。它发挥了作用。

按下Enter键时，Bootbox“确认”回调

2 个答案: