自定义引导箱提示答案

【问题标题】：Customize bootbox prompt自定义引导箱提示
【发布时间】：2015-06-16 04:50:27
【问题描述】：

我要自定义bootbox prompt输入框。我想在input 元素中添加clsss 属性。

我试试这个代码

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 的回答，我更新了我的代码。但是类属性添加在div 元素中而不是input 元素中。

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

查看我的检查元素图片

【问题讨论】：

标签： javascript jquery jquery-plugins bootbox

【解决方案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');
});

【讨论】：

我试试你的回答。但是类添加了模态 div 元素。但我想在输入元素中添加类。请查看我更新的问题
@Md.SahadatHossain 是只有 out 输入还是不止一个输入？
我不写任何模态html。 bootbox 插件生成模态 html。您可以在我的问题中查看检查元素图片中的模态 html
提示将只有一个输入

【解决方案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);
});

【讨论】：

【解决方案3】：

按照提示使用 jquery 添加类为我完成了这项工作。然后我们可以玩输入的样式。

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

【讨论】：