javascript - 自定义bootbox提示

Question

我想自定义bootbox提示符输入框。我想在 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 的回答，我更新了我的代码。但是 class 属性添加在 div 元素中，而不是 input 元素中。

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

查看我的检查元素图片

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