Tags

, , ,

12191723_1197048006977463_2320538824572009542_n

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");

 

Live Demo

 

Advertisements