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

问题

As the title suggests, I want to add the Enter key as an event handler for Bootbox.js. When you an alert() popup is called, you can press enter to dismiss it, but that is not the case with Bootbox.js. I do not know how to get access to the button inside Bootbox.js to add an event handler. Any suggestions?

回答1:

In order for the button to take focus, it should be defined with the "btn-primary" class name:

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

回答2:

I see this post has no answer yet for case when user has focus in the form itself

Here's how to do it :

Code :

$(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...
            }
        }
    }
})

Explanation :

First bit of code will catch the "submit" event for all bootbox dialogs with forms in it and prevent the submit with preventDefault() it will then emulate a click on the button that has className : "btn-primary"

(Note that it's going to trigger a click to all bootbox dialogs so you might wanna change it for your use case if you have more than a dialog on the page at once)

Second bit of code is a simple dialog calling. Important parts are

onEscape : true if you want to close the dialog with Escape key
className : "btn-success btn-primary" btn-success can obviously be changed to fit your needs

Hope this helps the next person !

回答3:

use btnclassName and assign "btn-primary as below in code

function 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();

            }
        }
    });
}

来源：https://stackoverflow.com/questions/26328539/bootbox-make-the-default-button-work-with-the-enter-key

标签

javascript

html

html5

bootbox