1. Include the required intlTelInput.css in the head section of your page.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css">
2. Create a standard telephone input field.
<input type="tel" id="mobile-number" placeholder="e.g. +1 702 123 4567">
3. Include jQuery javascript library and jQuery International Telephone Input plugin at the bottom of your page.
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js"></script>
4. Initialize the plugin and we’re done.
$("#mobile-number").intlTelInput();
5. Default options.
// typing digits after a valid number will be added to the extension part of the number allowExtensions: false, // automatically format the number according to the selected country autoFormat: true, // if there is just a dial code in the input: remove it on blur, and re-add it on focus autoHideDialCode: true, // add or remove input placeholder with an example number for the selected country autoPlaceholder: true, // default country defaultCountry: "", // geoIp lookup function geoIpLookup: null, // don't insert international dial codes nationalMode: true, // number type to use for placeholders numberType: "MOBILE", // display only these countries onlyCountries: [], // the countries at the top of the list. defaults to united states and united kingdom preferredCountries: [ "us", "gb" ], // specify the path to the libphonenumber script to enable validation/formatting utilsScript: ""
6. Public methods.
// destroy $("#demo").intlTelInput("destroy"); // Get the extension part of the current number var extension = $("#demo").intlTelInput("getExtension"); // Get the current number in the given format var intlNumber = $("#demo").intlTelInput("getNumber"); // Get the type (fixed-line/mobile/toll-free etc) of the current number. var numberType = $("#demo").intlTelInput("getNumberType"); // Get the country data for the currently selected flag. var countryData = $("#demo").intlTelInput("getSelectedCountryData"); // Get more information about a validation error. var error = $("#demo").intlTelInput("get<a href="http://www.jqueryscript.net/tags.php?/Validation/">Validation</a>Error"); // Vali<a href="http://www.jqueryscript.net/time-clock/">date</a> the current number var isValid = $("#demo").intlTelInput("isValidNumber"); // Load the utils.js script (included in the lib directory) to enable formatting/validation etc. $("#demo").intlTelInput("loadUtils", "lib/libphonenumber/build/utils.js"); // Change the country selection $("#demo").intlTelInput("selectCountry", "gb"); // Insert a number, and update the selected flag accordingly. $("#demo").intlTelInput("setNumber", "+44 7733 123 456");
Advertisements