自定义启动箱提示

时间:2015-06-16 04:50:28

标签: javascript jquery jquery-plugins bootbox

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

我试试这段代码

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);
    })
});

请参阅我的检查元素图片 enter image description here

3 个答案:

答案 0 :(得分:5)

className中有一个名为bootbox的选项,可用于添加class,添加class后,请尝试将maxlength设置为如下:

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

初始化后,您可以在maxlength

上添加document.ready属性
$(document).ready(function(){
       $('.only-number').attr('maxlength','13');
});

<强>更新

在初始化期间删除className,并在初始化后添加以下代码

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

答案 1 :(得分:0)

如果某人仅需要针对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);
});

答案 2 :(得分:0)

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

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