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

International Telephone Input With Flags and Dial Codes
File Size: 73.48 KB
Views Total: 8593 views
Last Update:June 18, 2024
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 :
  • v23.0.12
  • v23.0.11
  • v23.0.10
  • v23.0.9
  • v23.0.8
  • v23.0.7
  • v23.0.6
  • v23.0.5
  • v23.0.4
  • v23.0.3
  • v23.0.2
  • v23.0.1
  • v23.0.0
  • v22.0.2
  • v22.0.1
  • v22.0.0
  • v21.2.8
  • v21.2.7
  • v21.2.6
  • v21.2.5
  • v21.2.4
  • v21.2.3
  • v21.2.2
  • v21.2.1
  • v21.2.0
  • v21.1.4
  • v21.1.3
  • v21.1.2
  • v21.1.1
  • v21.1.0

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.