Jquery Plugin To Create International Telephone List Box With Country Code and Flags

Today i am going to introduce awesome Jquery Plugin To Create International Telephone List Box With Country Code and Flags. This jQuery plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user’s country, displays a relevant placeholder and provides formatting/validation methods.

Features:

* Automatically select the user’s current country using an IP lookup
* Automatically set the input placeholder to an example number for the selected country
* Navigate the country dropdown by typing a country’s name, or using up/down keys
* Handle phone number extensions
* The user types their national number and the plugin gives you the full standardized international number
* Full validation, including specific error types
* Retina flag icons
* Lots of initialisation options for customisation, as well as public methods for interaction

Create International Telephone List Box With Country Code and Flags

Follow below steps to add International Telephone List Box With Country Code and Flags on your website form.

Libraries

First of all add required JS+CSS libraries on page.

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

<script src="http://code.jquery.com/jquery-latest.min.js">script>
<script src="intlTelInput.min.js">script>

Don’t forget to override the path to flags.png in your CSS

.iti-flag {background-image: url("path/to/flags.png");}
 
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .iti-flag {background-image: url("path/to/[email protected]");}
}

HTML

Create input box where you have to display International Telephone List Box With Country Code and Flags

JS

Add the plugin script and initialise it on your input element

<script>
      $("#tel").intlTelInput();
script>

See live demo and download source code.

You can also more options on above function to control the plugins behaviours advanced features.

<script>
    $("#tel").intlTelInput({
      // allowDropdown: false,
      // autoHideDialCode: false,
      // autoPlaceholder: "off",
      // dropdownContainer: "body",
      // excludeCountries: ["us"],
      // formatOnDisplay: false,
      // geoIpLookup: function(callback) {
      //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
      //     var countryCode = (resp && resp.country) ? resp.country : "";
      //     callback(countryCode);
      //   });
      // },
      // hiddenInput: "full_number",
      // initialCountry: "auto",
      // nationalMode: false,
      // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
      // placeholderNumberType: "MOBILE",
      // preferredCountries: ['cn', 'jp'],
      // separateDialCode: true,
      utilsScript: "build/js/utils.js"
    });
  script>

See official github repository for more information and follow for future updates.

Related