jQuery Plugins › jQuery Form Plugins › International Telephone Input

International Telephone Input With Flags and Dial Codes

File Size:	760 KB
Views Total:	478161
Last Update:	05/23/2023 00:19:00 UTC
Publish Date:	10/13/2013 09:25:57 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Basic usage:

1. Include the required intlTelInput.css in the head section of your page.

<link rel="stylesheet" href="build/css/intlTelInput.css">

2. Create a standard telephone input field.

<input type="tel" id="demo" placeholder="" id="telephone">

3. Include the International Telephone Input plugin at the bottom of your page.

<!-- Use as a Vanilla JS plugin -->
<script src="build/js/intlTelInput.min.js"></script>

<!-- Use as a jQuery plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="build/js/intlTelInput-jquery.min.js"></script>

4. Initialize the plugin and we're done.

// Vanilla Javascript
var input = document.querySelector("#telephone");
window.intlTelInput(input,({
  // options here
}));

// jQuery 
$("#telephone").intlTelInput({
  // options here
});

5. All default options to customize the plugin.

// whether or not to allow the dropdown
allowDropdown: true,

// when enabled (requires nationalMode to be disabled), the international dial code will be automatically inserted into the input in 3 situations: (A) upon initialisation, and (B) when the user selects a country from the dropdown, and (C) upon calling setCountry. Additionally, the plugin will listen for blur/submit events, and if the input only contains a dial code, it will automatically be removed to avoid submitting just that.
autoInsertDialCode: true,

// add a placeholder in the input with an example number for the selected country
autoPlaceholder: "polite",

// modify the auto placeholder
customPlaceholder: null,

// append menu to specified element
dropdownContainer: null,

// don't display these countries
excludeCountries: [],

// format the input value during initialisation and on setNumber
formatOnDisplay: true,

// geoIp lookup function
geoIpLookup: null,

// inject a hidden input with this name, and on submit, populate it with the result of getNumber
hiddenInput: "",

// initial country
initialCountry: "",

// localized country names e.g. { 'de': 'Deutschland' }
localizedCountries: null,

// don't insert international dial codes
nationalMode: true,

// display only these countries
onlyCountries: [],

// number type to use for placeholders
placeholderNumberType: "MOBILE",

// the countries at the top of the list. defaults to united states and united kingdom
preferredCountries: [ "us", "gb" ],

// display the country dial code next to the selected flag so it's not part of the typed number
separateDialCode: false,

// show/hide the flags
showFlags: true,

// specify the path to the libphonenumber script to enable validation/formatting
utilsScript: ""

6. API methods.

// destroy
instance.destroy();

// Get the extension part of the current number
var extension = instance.getExtension();

// Get the current number in the given format
var intlNumber = instance.getNumber();

// Get the type (fixed-line/mobile/toll-free etc) of the current number. 
var numberType = instance.getNumberType();

// Get the country data for the currently selected flag.
var countryData = instance.getSelectedCountryData();

// Get more information about a validation error. 
var error = instance.getValidationError();

// Validate the current number
var isValid = instance.isValidNumber();

// Change the country selection
instance.selectCountry("gb");

// Insert a number, and update the selected flag accordingly.
instance.setNumber("+44 7733 123 456");

// Change the placeholderNumberType option.
instance..setPlaceholderNumberType("FIXED_LINE");

// Load the utils.js script (included in the lib directory) to enable formatting/validation etc.
window.intlTelInputGlobals.loadUtils("build/js/utils.js");

// Get all the country data
var countryData = window.intlTelInputGlobals.getCountryData();

7. Event handlers.

input.addEventListener("countrychange", function() {
  // do something with iti.getSelectedCountryData()
});

input.addEventListener("open:countrydropdown", function() {
  // triggered when the user opens the dropdown
});

input.addEventListener("close:countrydropdown", function() {
  // triggered when the user closes the dropdown
});

Changelog:

v18.1.6 (2023-05-23)

1415 and 1419 screen reader enhancements

v18.1.4 (2023-04-21)

Update

v18.1.3 (2023-04-15)

Update

v18.1.1 (2023-04-13)

Simplify nationalMode option. Previously, when nationalMode was set to false, the plugin was needlessly creating a worse UX for users who typed a valid national number in 2 situations: (1) it wouldn't update the flag between NANP countries if you typed a different area code (in national format), and (2) isValidNumber would return false for a valid national number.

v18.1.0 (2023-04-10)

Add showFlags option

v18.0.0 (2023-04-07)

Remove autoHideDialCode option in favour of new autoInsertDialCode option
Allow nationalMode to be used with separateDialCode

v17.0.21 (2023-03-10)

Update north macedonia in data.js

v17.0.19 (2022-09-14)

Updating libphonenumber to version v8.12.54

v17.0.18 (2022-07-16)

Update

v17.0.17 (2022-05-31)

Update

v17.0.16 (2022-03-15)

Update

v17.0.15 (2021-11-30)

Update

v17.0.13 (2021-05-30)

Update

v17.0.12 (2021-02-14)

Update

v17.0.11 (2021-02-08)

Update

v17.0.10 (2021-02-07)

Update

v17.0.8 (2020-10-21)

Update

v17.0.6 (2020-10-08)

Update

v17.0.5 (2020-09-21)

Update

v17.0.2 (2020-05-25)

Update

v17.0.0 (2020-04-19)

Update validationError enum in utils.js to match latest version of libphonenumber
Change ID attributes to be unique (both within the dropdown e.g. dupe countries in preferred section, AND across multiple instances of the plugin)

v16.1.0 (2020-04-11)

Update

v16.0.15 (2020-04-05)

Update

v16.0.14 (2020-04-03)

Update

v16.0.11 (2020-02-13)

Update

v16.0.10 (2020-02-10)

Update

v16.0.8 (2019-11-29)

Update

v16.0.7 (2019-10-25)

Update

v16.0.6 (2019-10-21)

Add navigation with arrows support for IE

v16.0.5 (2019-10-10)

Update

v16.0.4 (2019-09-23)

Update

v16.0.3 (2019-09-01)

Update

v16.0.2 (2019-07-08)

Fixed issue with invalid `remove` function in IE11.

v16.0.1 (2019-07-04)

Updated

v16.0.0 (2019-06-24)

Switched CSS class names to use BEM, so you shouldn't get any more clashes with generic class names like "highlight".
All NANP countries now have just +1 as their dialCode, when some used to include the area code e.g. Barbados used to have dial code +1246 and now has just +1.

v15.1.2 (2019-06-17)

Fix: getNumber sometimes returning just dial code

v15.1.0 (2019-05-23)

Accessibility: focus highlighted list item

v15.0.1 (2019-03-04)

Update

v15.0.0 (2019-02-11)

Change behaviour of autoHideDialCode option

v14.1.0 (2019-02-10)

added getInstance static method

v14.0.10 (2019-02-06)

Update

v14.0.9 (2019-02-05)

Update

v14.0.8 (2019-01-28)

Update

v14.0.7 (2019-01-07)

Update

v14.0.6 (2018-11-21)

Update

v14.0.5 (2018-11-08)

Update

v14.0.4 (2018-11-02)

Update

v14.0.3 (2018-10-07)

Update

v14.0.2 (2018-09-26)

Update

v13.0.4 (2018-09-14)

Update

v13.0.3 (2018-08-25)

Update

v12.4.0 (2018-06-24)

Update

v12.3.0 (2018-06-11)

Update

v10.0.1 (2016-12-15)

rename numberType option to placeholderNumberType
rename formatOnInit to formatOnDisplay

v9.2.7 (2016-12-08)

separate allowDropdown and separateDialCode options
make defaults object accessible from outside
bug fixes

v9.2.6 (2016-12-03)

update

v9.2.5 (2016-12-01)

fix issue: libphonenumber methods expect NANP numbers to include area code

v9.2.4 (2016-11-01)

separate allowDropdown and separateDialCode options

v9.2.3 (2016-10-12)

separate allowDropdown and separateDialCode options
make defaults object accessible from outside
bug fixes

This awesome jQuery plugin is developed by jackocnr. For more Advanced Usages, please check the demo page or visit the official website.

International Telephone Input With Flags and Dial Codes

See Also:

Basic usage:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review