Best Tutor On jQuery International Telephone Input With Flags and Dial Codes

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.

VIEW DEMO  DOWNLOAD

Basic usage:

1. Include the required intlTelInput.css in the head section of your page.

1	<link rel="stylesheet" href="build/css/intlTelInput.css">

2. Create a standard telephone input field.

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

3. Include jQuery javascript library and jQuery International Telephone Input plugin at the bottom of your page.

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

2	<script src="build/js/intlTelInput.js"></script>

4. Initialize the plugin and we're done.

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

5. Default options.

01	// whether or not to allow the dropdown

02	allowDropdown: true,

03

04	// if there is just a dial code in the input: remove it on blur, and re-add it on focus

05	autoHideDialCode: true,

06

07	// add a placeholder in the input with an example number for the selected country

08	autoPlaceholder: "polite",

09

10	// modify the auto placeholder

11	customPlaceholder: null,

12

13	// append menu to a specific element

14	dropdownContainer: "",

15

16	// don't display these countries

17	excludeCountries: [],

18

19	// format the input value during initialisation

20	formatOnDisplay: true,

21

22	// geoIp lookup function

23	geoIpLookup: null,

24

25	// initial country

26	initialCountry: "",

27

28	// don't insert international dial codes

29	nationalMode: true,

30

31	// number type to use for placeholders

32	placeholderNumberType: "MOBILE",

33

34	// display only these countries

35	onlyCountries: [],

36

37	// the countries at the top of the list. defaults to united states and united kingdom

38	preferredCountries: [ "us", "gb" ],

39

40	// display the country dial code next to the selected flag so it's not part of the typed number

41	separateDialCode: false,

42

43	// specify the path to the libphonenumber script to enable validation/formatting

44	utilsScript: ""

6. Public methods.

01	// destroy

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

03

04	// Get the extension part of the current number

05	var extension = $("#demo").intlTelInput("getExtension");

06

07	// Get the current number in the given format

08	var intlNumber = $("#demo").intlTelInput("getNumber");

09

10	// Get the type (fixed-line/mobile/toll-free etc) of the current number.

11	var numberType = $("#demo").intlTelInput("getNumberType");

12

13	// Get the country data for the currently selected flag.

14	var countryData = $("#demo").intlTelInput("getSelectedCountryData");

15

16	// Get more information about a validation error.

17	var error = $("#demo").intlTelInput("get<a href="https://www.jqueryscript.net/tags.php?/Validation/">Validation</a>Error");

18

19	// Vali<a href="https://www.jqueryscript.net/time-clock/">date</a> the current number

20	var isValid = $("#demo").intlTelInput("isValidNumber");

21

22	// Load the utils.js script (included in the lib directory) to enable formatting/validation etc.

23	$("#demo").intlTelInput("loadUtils", "lib/libphonenumber/build/utils.js");

24

25	// Change the country selection

26	$("#demo").intlTelInput("selectCountry", "gb");

27

28	// Insert a number, and update the selected flag accordingly.

29	$("#demo").intlTelInput("setNumber", "+44 7733 123 456");

Change logs:

v12.0.1 (2017-08-04)

• update

SHARE THIS POST

About Wakabia