Bootbox：使默认按钮与 ENTER 键一起使用？答案

【问题标题】：Bootbox: Make the default button work with the ENTER key?Bootbox：使默认按钮与 ENTER 键一起使用？
【发布时间】：2014-10-12 18:34:47
【问题描述】：

正如标题所示，我想添加 Enter 键作为 Bootbox.js 的事件处理程序。当您调用 alert() 弹出窗口时，您可以按 Enter 键将其关闭，但 Bootbox.js 并非如此。我不知道如何访问 Bootbox.js 中的按钮以添加事件处理程序。有什么建议么？

【问题讨论】：

标签： javascript html bootbox

【解决方案1】：

为了让按钮获得焦点，它应该使用“btn-primary”类名来定义：

className:
main: {
      className: "btn-primary",  ...
}

【讨论】：

这仅在我们没有关注任何输入字段时才有效。

【解决方案2】：

我看到这篇文章还没有解决用户关注表单本身的情况

这是怎么做的：

代码：

$(document).on("submit", ".bootbox form", function(e) {
    e.preventDefault();
    $(".bootbox .btn-primary").click();
});

bootbox.dialog({
    title : "Title",
    message : $("#templateWithForm").html(),
    onEscape : true,
    buttons : 
    {
        success : {
            label : "OK",
            className : "btn-success btn-primary",
            callback : function() {
                // do something...
            }
        }
    }
})

解释：

第一段代码将捕获所有带有表单的引导框对话框的“提交”事件，并阻止使用preventDefault() 提交，然后它将模拟单击带有className : "btn-primary" 的按钮

（请注意，它会触发对所有引导框对话框的点击，因此如果页面上一次有多个对话框，您可能需要针对您的用例进行更改）

第二段代码是一个简单的对话框调用。重要的部分是

onEscape : true 如果你想用 Escape 键关闭对话框
className : "btn-success btn-primary" btn-success 显然可以根据您的需要进行更改

希望这可以帮助下一个人！

【讨论】：

这么多年过去了，从事一个遗留项目，这就是我需要的答案。当它应该是内置功能时，感觉就像是“黑客”，但它确实有效。

【解决方案3】：

您只需为要单击的按钮添加“bootbox-accept”类名即可。

例子：

bootbox.dialog({
    title : "Title",
    message : "Your Message",
    onEscape : true,
    buttons : 
    {
        success : {
            label : "OK",
            className : "btn-success bootbox-accept",
            callback : function() {
                // do something...
            }
        },
        cancel:{
            label : "Cancel",
            className : "btn-danger",
            callback : function() {
                // do something...
            }
        },
    }
})

【讨论】：

不错！它真的对我有用！谢谢你珍珠！

【解决方案4】：

使用 btnclassName 并在代码中分配“btn-primary 如下”

函数 ShowpopUp() {

    bootbox.confirm({
        size: "Large",
        btnclassName: "btn-primary",
         title: "Guests from outside your organization",
        message: "The following recipients are from outside of the SPSG organization:<br> <br> "
            +
            getSelectedNonMembersEmails()

            + "<br> <br> Are you sure you would like to send it?",

        callback: function (result) {
            if (result === true) {
                reportVm.currentPage(4);
            }
            else {
                bootbox.hideAll();

            }
        }
    });
}

【讨论】：