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
