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.
jquery-telephone-dropdown-countrycode-flag

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.

<!--CSS-->
<link rel="stylesheet" href="intlTelInput.css">
 
<!--JS-->
<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

<input type="tel" id="tel">

JS

Add the plugin script and initialise it on your input element

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

See live demo and download source code.

DEMO | DOWNLOAD

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.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.