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 badges3 Answers
Reset to default 5Well 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");
});