Telephone Input With International Flag Plugin – intl-tel-input

International Telephone Input With Flags and Dial Codes
File Size: 73.48 KB
Views Total: 7279 views
Last Update:September 23, 2023
Publish Date: May 31, 2013
Official Website: Go to website
License: MIT
Plugin Author: jackocnr
Demo    Download

Telephone Input With International Flag In Java Script Plugin. This plugin use in validating international telephone numbers with flag. user can adds a flag dropdown in to any input, detects the telephone code of country. displays a relevant placeholder and provides formatting/validation methods.

How To Use :

Add the required intlTelInput.css and JS in the head section of your web page.

<link rel="stylesheet" href="build/css/intlTelInput.css">
<!-- Use as a jQuery plugin -->
<script src=""></script>
<script src="build/js/intlTelInput-jquery.min.js"></script> 

Add for Vanilla JS plugin

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

Add HTML code a standard telephone input field.

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

Call Function the plugin and we’re done.

// Vanilla Javascript
var input = document.querySelector("#telephone");
  // options here

// jQuery 
  // options here

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

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


Thanks for make jQuery plugin is developed by jackocnr For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v18.2.1
  • v18.2.0
  • v18.1.8
  • v18.1.7
  • v18.1.6
  • v18.1.5
  • v18.1.4
  • v18.1.3
  • v18.1.2
  • v18.1.1
  • v18.1.0
  • v18.0.3
  • v18.0.2
  • v18.0.1
  • v18.0.0
  • v17.0.21
  • v17.0.20
  • v17.0.19
  • v17.0.18
  • v17.0.17
  • v17.0.16
  • v17.0.15
  • v17.0.14
  • v17.0.13
  • v17.0.12
  • v17.0.11
  • v17.0.10
  • v17.0.9
  • v17.0.8
  • v17.0.7

guri singh

My name is Guri. I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.