This plugin creates an input group preceded by a dropdown of all countries.
Download and include the script at the end of the body tag.
<!--suppress HtmlUnknownTarget -->
<script src="path/to/jquery.bsPhone.min.js" type="text/javascript">
via command
composer require webcito/bs-phone-input:dev-main
via composer.json
{
"require": {
"webcito/bs-phone-input": "dev-main"
}
}
All inputs with the attribute [data-bs-toggle="phone"]
are initialized automatically.
<input type="tel" value="+49123456789" data-bs-toggle="phone" id="example">
<!-- load jQuery and Bootstrap before -->
<script src="dist/jquery.bsPhone.min.js" type="text/javascript">
<script>
$('#example').bsPhone();
</script>
property | data-attribute | type | default | desc |
---|---|---|---|---|
default | [data-default] | string |
de |
The ISO code of the country to be preselected |
limitedCountries | [data-limited-countries] | array |
[] |
If only certain countries should appear in the drop-down list, the country codes could be entered here |
inputGroupClasses | [data-input-group-classes] | string |
mb-3 |
The CSS classes are set to the parent element (.input-group) |
dropDownClasses | [data-drop-down-classes] | string |
btn btn-outline-secondary |
The CSS classes are set to the DropDown button |
dropDownMaxHeight | [data-drop-down-max-height] | string |
50vh |
CSS property for the height of the scrollable area in the DropDown menu |
inputClasses | [data-input-classes] | string |
border-secondary rounded-end |
Additional CSS classes for the input field |
formatValue | function |
The formatting for the result in the original input field. 2 parameters are provided: (phoneCode, value) => {} | ||
formatView | function |
The formatting for the result in the displayed input field. 2 parameters are provided: (phoneCode, value) => {} |
Methods are called as follows
$('input').bsPhone('method', param);
method | example | description |
---|---|---|
'val' |
$('#example').bsPhone('val', '+49123456789'); |
Sets the value of the input |
'val' |
$('#example').bsPhone('val'); or $('#example').val(); |
Get the value of the input |