Worldwide Phone Enter With Flags and Dial Codes

Worldwide Phone Enter is a helpful JavaScript jQuery plugin that turns the usual enter into an Worldwide Phone Enter with a nationwide flag drop down listing.

When clicking the dropdown listing, it lists all of the international locations and their worldwide dial codes subsequent to their flags. Excellent for worldwide guests of your web site.

See Additionally:

Primary utilization:

1. Embody the required intlTelInput.css within the head part of your web page.

<hyperlink rel="stylesheet" href="construct/css/intlTelInput.css">

2. Create an ordinary phone enter area.

<enter sort="tel" id="demo" placeholder="" id="phone">

3. Embody the Worldwide Phone Enter plugin on the backside of your web page.

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

<!-- Use as a jQuery plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="construct/js/intlTelInput-jquery.min.js"></script> 

4. Initialize the plugin and we’re accomplished.

// Vanilla Javascript
var enter = doc.querySelector("#phone");
window.intlTelInput(enter,({
  // choices right here
}));

// jQuery 
$("#phone").intlTelInput({
  // choices right here
});

5. All default choices to customise the plugin.

// whether or not or to not enable the dropdown
allowDropdown: true,

// if there may be only a dial code within the enter: take away it on blur, and re-add it on focus
autoHideDialCode: true,

// add a placeholder within the enter with an instance quantity for the chosen nation
autoPlaceholder: "well mannered",

// modify the auto placeholder
customPlaceholder: null,

// append menu to specified aspect
dropdownContainer: null,

// do not show these international locations
excludeCountries: [],

// format the enter worth throughout initialisation and on setNumber
formatOnDisplay: true,

// geoIp lookup operate
geoIpLookup: null,

// inject a hidden enter with this identify, and on submit, populate it with the results of getNumber
hiddenInput: "",

// preliminary nation
initialCountry: "",

// localized nation names e.g. { 'de': 'Deutschland' }
localizedCountries: null,

// do not insert worldwide dial codes
nationalMode: true,

// show solely these international locations
onlyCountries: [],

// quantity sort to make use of for placeholders
placeholderNumberType: "MOBILE",

// the international locations on the prime of the listing. defaults to united states of america and uk
preferredCountries: [ "us", "gb" ],

// show the nation dial code subsequent to the chosen flag so it is not a part of the typed quantity
separateDialCode: false,

// specify the trail to the libphonenumber script to allow validation/formatting
utilsScript: ""

6. API strategies.

// destroy
occasion.destroy();

// Get the extension half of the present quantity
var extension = occasion.getExtension();

// Get the present quantity within the given format
var intlNumber = occasion.getNumber();

// Get the kind (fixed-line/cell/toll-free and many others) of the present quantity. 
var numberType = occasion.getNumberType();

// Get the nation information for the at the moment chosen flag.
var countryData = occasion.getSelectedCountryData();

// Get extra details about a validation error. 
var error = occasion.getValidationError();

// Validate the present quantity
var isValid = occasion.isValidNumber();

// Change the nation choice
occasion.selectCountry("gb");

// Insert a quantity, and replace the chosen flag accordingly.
occasion.setNumber("+44 7733 123 456");

// Change the placeholderNumberType possibility.
occasion..setPlaceholderNumberType("FIXED_LINE");

// Load the utils.js script (included within the lib listing) to allow formatting/validation and many others.
window.intlTelInputGlobals.loadUtils("construct/js/utils.js");

// Get all of the nation information
var countryData = window.intlTelInputGlobals.getCountryData();

7. Occasion handlers.

enter.addEventListener("countrychange", operate() {
  // do one thing with iti.getSelectedCountryData()
});

enter.addEventListener("open:countrydropdown", operate() {
  // triggered when the person opens the dropdown
});

enter.addEventListener("shut:countrydropdown", operate() {
  // triggered when the person closes the dropdown
});

Changelog:

v17.0.19 (2022-09-14)

• Updating libphonenumber to model v8.12.54

v17.0.18 (2022-07-16)

v17.0.17 (2022-05-31)

v17.0.16 (2022-03-15)

v17.0.15 (2021-11-30)

v17.0.13 (2021-05-30)

v17.0.12 (2021-02-14)

v17.0.11 (2021-02-08)

v17.0.10 (2021-02-07)

v17.0.8 (2020-10-21)

v17.0.6 (2020-10-08)

v17.0.5 (2020-09-21)

v17.0.2 (2020-05-25)

v17.0.0 (2020-04-19)

• Replace validationError enum in utils.js to match newest model of libphonenumber
• Change ID attributes to be distinctive (each inside the dropdown e.g. dupe international locations in most well-liked part, AND throughout a number of cases of the plugin)

v16.1.0 (2020-04-11)

v16.0.15 (2020-04-05)

v16.0.14 (2020-04-03)

v16.0.11 (2020-02-13)

v16.0.10 (2020-02-10)

v16.0.8 (2019-11-29)

v16.0.7 (2019-10-25)

v16.0.6 (2019-10-21)

• Add navigation with arrows help for IE

v16.0.5 (2019-10-10)

v16.0.4 (2019-09-23)

v16.0.3 (2019-09-01)

v16.0.2 (2019-07-08)

• Mounted challenge with invalid `take away` operate in IE11.

v16.0.1 (2019-07-04)

v16.0.0 (2019-06-24)

• Switched CSS class names to make use of BEM, so that you should not get any extra clashes with generic class names like “spotlight”.
• All NANP international locations now have simply +1 as their dialCode, when some used to incorporate the world code e.g. Barbados used to have dial code +1246 and now has simply +1.

v15.1.2 (2019-06-17)

• Repair: getNumber generally returning simply dial code

v15.1.0 (2019-05-23)

• Accessibility: focus highlighted listing merchandise

v15.0.1 (2019-03-04)

v15.0.0 (2019-02-11)

• Change behaviour of autoHideDialCode possibility

v14.1.0 (2019-02-10)

• added getInstance static technique

v14.0.10 (2019-02-06)

v14.0.9 (2019-02-05)

v14.0.8 (2019-01-28)

v14.0.7 (2019-01-07)

v14.0.6 (2018-11-21)

v14.0.5 (2018-11-08)

v14.0.4 (2018-11-02)

v14.0.3 (2018-10-07)

v14.0.2 (2018-09-26)

v13.0.4 (2018-09-14)

v13.0.3 (2018-08-25)

v12.4.0 (2018-06-24)

v12.3.0 (2018-06-11)

v10.0.1 (2016-12-15)

• rename numberType choice to placeholderNumberType
• rename formatOnInit to formatOnDisplay

v9.2.7 (2016-12-08)

• separate allowDropdown and separateDialCode choices
• make defaults object accessible from exterior
• bug fixes

v9.2.6 (2016-12-03)

v9.2.5 (2016-12-01)

• repair challenge: libphonenumber strategies anticipate NANP numbers to incorporate space code

v9.2.4 (2016-11-01)

• separate allowDropdown and separateDialCode choices

v9.2.3 (2016-10-12)

• separate allowDropdown and separateDialCode choices
• make defaults object accessible from exterior
• bug fixes

This superior jQuery plugin is developed by jackocnr. For extra Superior Usages, please test the demo web page or go to the official web site.