Javascript bootbox，无法点击ENTER键

Question

当我打开引导箱时，输入信息，然后按回车键，它会关闭引导箱并滚动回页面顶部。 （不是按创建按钮或取消按钮）。我尝试将类名更改为 btn-primary。这没有帮助。

代码如下：

    bootbox.dialog({
    title: 'Create a new bucket',
    message:
            '<div class="row"> ' +
                '<div class="col-md-12"> ' +
                    '<form class="form-horizontal"> ' +
                        '<div class="form-group"> ' +
                            '<label class="col-md-4 control-label" for="bucketName">Bucket Name</label> ' +
                            '<div class="col-md-8"> ' +
                                '<input id="bucketName" name="bucketName" type="text" placeholder="Enter bucket name" class="form-control" autofocus> ' +
                                '<div>' +
                                    '<span id="bucketModalErrorMessage" ></span>' +
                                '</div>'+
                            '</div>' +
                        '</div>' +
                        '<div class="form-group"> ' +
                            '<label class="col-md-4 control-label" for="bucketLocation">Bucket Location</label> ' +
                            '<div class="col-md-8"> ' +
                                '<select id="bucketLocation" name="bucketLocation" class="form-control"> ' +
                                    generateBucketOptions(self.settings.bucketLocations) +
                                '</select>' +
                            '</div>' +
                        '</div>' +
                    '</form>' +
                '</div>' +
            '</div>',
    buttons: {
        cancel: {
            label: 'Cancel',
            className: 'btn-default'
        },
        confirm: {
            label: 'Create',
            className: 'btn-success',
            callback: function () {
                var bucketName = $('#bucketName').val();
                var bucketLocation = $('#bucketLocation').val();

                if (!bucketName) {
                    var errorMessage = $('#bucketModalErrorMessage');
                    errorMessage.text('Bucket name cannot be empty');
                    errorMessage[0].classList.add('text-danger');
                    return false;
                } else if (!isValidBucketName(bucketName, false)) {
                    bootbox.confirm({
                        title: 'Invalid bucket name',
                        message: 'Amazon S3 buckets can contain lowercase letters, numbers, and hyphens separated by' +
                        ' periods.  Please try another name.',
                        callback: function (result) {
                            if (result) {
                                self.openCreateBucket();
                            }
                        },
                        buttons: {
                            confirm: {
                                label: 'Try again'
                            }
                        }
                    });
                } else {
                    self.createBucket(bucketName, bucketLocation); //THIS IS IMPORTANT
                }
            }
        }
    }
});

Answer 1

这是一个带有确认对话框的示例

var dialog = bootbox.confirm({ ... });

//https://github.com/makeusabrew/bootbox/issues/411
dialog.on("shown.bs.modal", function () {
    dialog.attr("id", "dialog-1");
});

//https://stackoverflow.com/questions/26328539/bootbox-make-the-default-button-work-with-the-enter-key
$(document).on("submit", "#dialog-1 form", function (e) {
    e.preventDefault();
    $("#dialog-1 .btn-primary").click();
});

Answer 2

如果您使用提示符（但此解决方案在其他情况下应该有用） 这是实现此功能的最简单方法。

var input = document.getElementsByClassName("CLASS OF INPUT YOU WANT TO CHOOSE");
input[0].addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
      var click = document.getElementsByClassName("CLASS OF BUTTON YOU WANT TO PRESS");
      click[0].click();
     }
});

我还没有找到将 ID 分配给引导箱中的元素的方法，但是可以分配类。当然，您不能像选择具有 ID 的元素那样选择类，因此您必须按类获取元素，即使您只有一个所述类的元素，这也会创建数组。因此，您必须在数组中选择正确的元素。在我的情况下，这将是 [0]。选择您指定的键并使用按钮重复相同的过程。

如果您仔细按照我的说明进行操作，您应该可以使用密钥提交数据。

Answer 3

$('#bucketName').on('keypress', function (event) {
    if(event.which === 13){
        bootbox.hideAll();
        $('html, body').animate({scrollTop: '0px'}, 1000);
    }

});