自定义bootbox提示框

Question

我希望定制bootbox prompt输入框。我想在input元素中添加class属性。

我尝试了这段代码

bootbox.prompt({
    title: 'Enter Mobile Number',
    placeholder: '8801XXXXXXXXX',
    buttons: {
        confirm: {
            label: 'Submit'
        }
    },
    callback: function(value) {
        console.log(value);
    })
});

我想要类似那样的东西。

bootbox.prompt({
    title: 'Enter Mobile Number',
    placeholder: '8801XXXXXXXXX',
    class: 'only-number',
    buttons: {
        confirm: {
            label: 'Submit'
        }
    },
    callback: function(value) {
        console.log(value);
    })
});

更新

根据 Guruprasad Rao 的回答，我更新了我的代码。但是将 class 属性添加到 div 元素而不是 input 元素。

bootbox.prompt({
    title: 'Enter Mobile Number',
    placeholder: '8801XXXXXXXXX',
    className: 'only-number',
    buttons: {
        confirm: {
            label: 'Submit'
        }
    },
    callback: function(value) {
        console.log(value);
    })
});

请查看我的检查元素截图。

- Md. Sahadat Hossain

Answer 1

在bootbox中有一个名为className的选项，您可以使用它来添加class。一旦添加了class，请尝试按以下方式设置其maxlength：

bootbox.prompt({
    title: 'Enter Mobile Number',
    placeholder: '8801XXXXXXXXX',
    className: 'only-number',
    buttons: {
        confirm: {
            label: 'Submit'
        }
    },
    callback: function(value) {
        console.log(value);
    })
});

一旦初始化，您可以在 document.ready 上添加 maxlength 属性。

$(document).ready(function(){
       $('.only-number').attr('maxlength','13');
});

更新

在初始化过程中移除className，并在初始化后添加以下代码：

$(document).ready(function(){
   $('.bootbox-form').find('input').addClass('.only-number').attr('maxlength','13');
});

- Guruprasad J Rao

---

我尝试使用你的答案。但是类添加在模态div元素上。但我想在输入元素中添加类。请查看我的更新问题。 - Md. Sahadat Hossain

@Md.SahadatHossain 这里只会有一个输入还是会有多个输入？ - Guruprasad J Rao

我没有编写任何模态HTML。bootbox插件会生成模态HTML。您可以在我的问题中的检查元素图片中看到模态HTML。 - Md. Sahadat Hossain

prompt will be only one input - Md. Sahadat Hossain

Answer 2

如果有人只需要快速解决maxlength和其他属性限制问题：

bootbox.prompt({
    title: 'MyTitle',
    className: 'bootbox-custom-class',
    callback: function( input_value ) {
        console.log(input_value);
    },
}).on("shown.bs.modal", function( event ) {
    $('.bootbox-custom-class').find('.bootbox-input').attr('maxlength',5);
});

- Roy Shoa

Answer 3

使用jQuery添加类后，按照提示进行操作对我很有帮助。然后我们可以调整输入框的样式。

$(document).ready(function(){
   bootbox.prompt({
    title: 'Some Title',
    inputType: 'textarea',
    callback: function(value) {}
    });
   $('.bootbox-input-textarea').addClass("your_class");
});

- Kisho