A jQuery plugin for entering and validating international telephone numbers with searching phone country code by country name function.
The work is a by-product from MeetingPackage.com company project [MeetingPackage.com](https://meetingpackage.com).-
Download the latest release, or better yet install it with npm
-
Include the stylesheet
<link rel="stylesheet" href="path/to/intlTelInput.css">
- Override the path to flags.png in your CSS
.iti-flag {background-image: url("path/to/flags.png");}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.iti-flag {background-image: url("path/to/[email protected]");}
}
- Add the plugin script and initialise it on your input element
<input type="tel" id="phone">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="path/to/intlTelInput.js"></script>
<script>
$("#phone").intlTelInput();
</script>
- Recommended: initialise the plugin with the
utilsScript
option to enable formatting/validation, and to allow you to extract full international numbers usinggetNumber
. - Customization: the search input box style in intlTelInput.scss
#input-search-country {
width: 400px;
}