Multiple instances
If you have multiple telephone inputs on the same page, it is safe to initialise International Telephone Input on each of them individually in your JavaScript. You can use different initialisation options in each case e.g. in the demo below, we specify different placeholderNumberType
values for each of the first two instances. We also specify the onlyCountries
option in the third instance, so that country dropdown only includes three countries, but this does not affect the first two instances. Note that if you use utilsScript
or geoIpLookup
options across multiple instances, those requests will only be fired once, and the result will be shared.
Demo
Home: | |
Mobile: | |
Vacation: |
Markup
<table>
<tr>
<td>Home:</td>
<td><input id="home" type="tel" /></td>
</tr>
<tr>
<td>Mobile:</td>
<td><input id="mobile" type="tel" /></td>
</tr>
<tr>
<td>Vacation:</td>
<td><input id="vacation" type="tel" /></td>
</tr>
</table>
Code
const inputHome = document.querySelector("#home");
const inputMobile = document.querySelector("#mobile");
const inputVacation = document.querySelector("#vacation");
window.intlTelInput(inputHome, {
initialCountry: 'gb',
placeholderNumberType: 'FIXED_LINE',
utilsScript: "/intl-tel-input/js/utils.js?1733052783337" // just for formatting/placeholders etc
});
window.intlTelInput(inputMobile, {
initialCountry: 'gb',
placeholderNumberType: 'MOBILE',
utilsScript: "/intl-tel-input/js/utils.js?1733052783337"
});
window.intlTelInput(inputVacation, {
onlyCountries: ['es', 'fr', 'it'],
utilsScript: "/intl-tel-input/js/utils.js?1733052783337"
});