最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Customize bootbox prompt - Stack Overflow

programmeradmin2浏览0评论

I want to customize bootbox prompt input box. I want add clsss attribute in input element.

I try this code

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

I want to something like that

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

Update

As per Guruprasad Rao answer I update my code. But class attribute add in div element not in input element.

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

See my inspect element pic

I want to customize bootbox prompt input box. I want add clsss attribute in input element.

I try this code

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

I want to something like that

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

Update

As per Guruprasad Rao answer I update my code. But class attribute add in div element not in input element.

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

See my inspect element pic

Share Improve this question edited Jun 16, 2015 at 7:20 Md. Sahadat Hossain asked Jun 16, 2015 at 4:50 Md. Sahadat HossainMd. Sahadat Hossain 3,2364 gold badges35 silver badges56 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 5

Well there is an option called className in bootbox which you can use to add class and once you add class try setting its maxlength as below:

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

Once this is initialized you can add maxlength attribute on document.ready

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

UPDATE

Remove className during initialization and add below code once initialized

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

If someone need fast solution only for maxlength and other attributes limitations:

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

Adding the class using jquery following the prompt did the job for me. Then we can play with the style of the input.

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

评论列表(0)

  1. 暂无评论