Bootbox:使默认按钮与ENTER键一起工作

Bootbox: Make the default button work with the ENTER key?

本文关键字：一起 工作 ENTER 默认按钮 Bootbox      更新时间：2023-09-26

正如标题所示，我想添加Enter键作为Bootbox.js的事件处理程序。当调用alert（。有什么建议吗？

为了让按钮聚焦，它应该用"btn-primary"类名定义：

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

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

以下是操作方法：

代码：

$(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的成功显然可以根据您的需求进行更改

希望这能帮助下一个人！

您只需为要点击的按钮添加"bootbox accept"className即可。

示例：

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...
            }
        },
    }
})

在代码中使用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();
            }
        }
    });
}
相关文章：