jQuery International Telephone Input With Flags and Dial Codes

jQuery International Telephone Input With Flags and Dial Codes
File Size: 486 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

International Telephone Input is an useful jQuery plugin that turns the standard input into an International Telephone Input with a national flag drop down list. When clicking the dropdown list, it lists all the countries and their international dial codes next to their flags. Ideal for international visitors of your web site.

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="">

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="build/js/intlTelInput.js"></script> 

4. Initialize the plugin and we're done.

$("#demo").intlTelInput();

5. Default options.

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

// if there is just a dial code in the input: remove it on blur, and re-add it on focus
autoHideDialCode: 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 a specific element
dropdownContainer: "",

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

// format the input value during initialisation
formatOnDisplay: true,

// geoIp lookup function
geoIpLookup: null,

// initial country
initialCountry: "",

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

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

// display only these countries
onlyCountries: [],

// 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,

// 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("getValidationError");

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

Change logs:

v12.1.4 (2017-11-017)

  • 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.