International Telephone Input With Flags and Dial Codes
File Size: | 1.43 MB |
---|---|
Views Total: | 526725 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
International Telephone Input is a useful JavaScript 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 website.
See Also:
Basic usage:
1. Include the required intlTelInput.css in the head section of your page.
<link rel="stylesheet" href="build/css/intlTelInput.css">
2. Create a standard telephone input field.
<input type="tel" id="demo" placeholder="" id="telephone">
3. Include the International Telephone Input plugin at the bottom of your page.
<!-- Use as a Vanilla JS plugin --> <script src="build/js/intlTelInput.min.js"></script>
4. Initialize the plugin and we're done.
// Vanilla Javascript var input = document.querySelector("#telephone"); window.intlTelInput(input,({ // options here }));
5. All default options to customize the plugin.
// whether or not to allow the dropdown allowDropdown: true, // add a placeholder in the input with an example number for the selected country autoPlaceholder: "polite", // add a country search input at the top of the dropdown countrySearch: true, // modify the parentClass containerClass: "", // modify the auto placeholder customPlaceholder: null, // append menu to specified element dropdownContainer: null, // don't display these countries excludeCountries: [], // fix the dropdown width to the input width (rather than being as wide as the longest country name) fixDropdownWidth: true, // format the number as the user types formatAsYouType: true, // format the input value during initialisation and on setNumber formatOnDisplay: true, // geoIp lookup function geoIpLookup: null, // inject a hidden input with the name returned from this function, and on submit, populate it with the result of getNumber hiddenInput: null, // internationalise the plugin text e.g. search input placeholder, country names i18n: {}, // initial country initialCountry: "", // national vs international formatting for numbers e.g. placeholders and displaying existing numbers nationalMode: true, // display only these countries onlyCountries: [], // number type to use for placeholders placeholderNumberType: "MOBILE", // the countries at the top of the list preferredCountries: [], // option to hide the flags - must be used with showSelectedDialCode, or allowDropdown=false showFlags: true, // display the international dial code next to the selected flag showSelectedDialCode: false, // only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length strictMode: false, // use full screen popup instead of dropdown for country list useFullscreenPopup: typeof navigator !== "undefined" && typeof window !== "undefined" ? ( // we cannot just test screen size as some smartphones/website meta tags will report desktop // resolutions // Note: to target Android Mobiles (and not Tablets), we must find 'Android' and 'Mobile' /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) || window.innerWidth <= 500 ) : false, // specify the path to the libphonenumber script to enable validation/formatting utilsScript: ""
6. API methods.
// destroy instance.destroy(); // Get the extension part of the current number var extension = instance.getExtension(); // Get the current number in the given format var intlNumber = instance.getNumber(); // Get the type (fixed-line/mobile/toll-free etc) of the current number. var numberType = instance.getNumberType(); // Get the country data for the currently selected flag. var countryData = instance.getSelectedCountryData(); // Get more information about a validation error. var error = instance.getValidationError(); // Validate the current number var isValid = instance.isValidNumber(); // Check if the current number is valid using precise matching rules for each country/area code etc var isValid = instance.isValidNumberPrecise(); // Change the country selection instance.selectCountry("gb"); // Insert a number, and update the selected flag accordingly. instance.setNumber("+44 7733 123 456"); // Change the placeholderNumberType option. instance.setPlaceholderNumberType("FIXED_LINE"); // Load the utils.js script (included in the lib directory) to enable formatting/validation etc. window.intlTelInputGlobals.loadUtils("build/js/utils.js"); // Get all the country data window.intlTelInputGlobals.getCountryData(); // Get instance window.intlTelInputGlobals.getInstance(input);
7. Event handlers.
input.addEventListener("countrychange", function() { // do something with iti.getSelectedCountryData() }); input.addEventListener("open:countrydropdown", function() { // triggered when the user opens the dropdown }); input.addEventListener("close:countrydropdown", function() { // triggered when the user closes the dropdown });
Changelog:
v21.2.x (2024-04-25)
- Provide translation modules for several common languages
- Add ZH locale
- Add AC and XK country names in all translation files (currently not supported by country-list lib)
- Move translations out of data.js
- Dont override window.intlTelInputGlobals if already exists
- Improve translation exports
- Update to libphonenumber v8.13.35
- Bugfix
v21.1.x (2024-04-16)
- Add new CA dial code
- Bugfixes
- Significant reduction in CSS filesize
- Lots of other improvements under the hood e.g. linting/spelling/formatting fixes
v21.0.x (2024-04-07)
- Bugfixes
- Updated dependencies
- Remove legacy jQuery plugin
- Remove Sass variables in favour of CSS variables
- React: drop CommonJS build and rename ES Modules build from IntlTelInput.esm.js to IntlTelInput.js
- Removed redundant react props (placeholder, className, disabled, onFocus, onBlur), preferring inputProps
- Switch selected-flag div to be a button
- Rename HTML/CSS classes selected-flag to selected-country, and flag-container to country-container
v20.3.0 (2024-03-27)
- Remove babel build step as no longer needed
v20.2.0 (2024-03-26)
- Added strictMode option
v20.1.0 (2024-03-23)
- React component: support inputProps prop
v20.0.5 (2024-03-21)
- a11y fix
v20.0.4 (2024-03-19)
- Cleanup code
v20.0.3 (2024-03-18)
- Update dependency
v20.0.2 (2024-03-17)
- Build CSS
v20.0.1 (2024-03-17)
- Bugfix
v20.0.0 (2024-03-17)
- Limit the number of files installed with intl-tel-input (as a dependency)
- Update the ARIA tags to work with countrySearch (there are 4 new translation keys in i18n option
- Remove defaultToFirstCountry option as that behaviour was causing problems and so is not recommended (you can always use initialCountry to set the initial country if you wish to)
- By default, calling isValidNumber will now default to mobile-only mode (it will only return true for valid mobile numbers), which means it will be much more accurate - if you don't want this, you can pass false as an argument e.g. isValidNumber(false)
- Removed legacy Promise checks, as they are now supported in all modern browsers
- Remove autoInsertDialCode feature, preferring showSelectedDialCode
- Simplified hiddenInput option so it must return an object
- Validation methods now return false if the number contains an alphabetic character
- Fix scroll issues with countrySearch
- React component usePreciseValidation prop
- Fix _handleKeyEvent firing twice for paste events
v19.5.7 (2024-03-15)
- bugfix
v19.5.6 (2024-03-10)
- mobileOnly flag for isValidNumber
v19.5.5 (2024-03-04)
- Bugfixes
v19.5.4 (2024-03-02)
- Bugfixes
v19.5.3 (2024-02-28)
- Update
v19.5.2 (2024-02-26)
- Update
v19.5.1 (2024-02-25)
- Bugfix
v19.5.0 (2024-02-24)
- New globe icon
v19.4.0 (2024-02-24)
- Improve hiddenInput to allow returning an object
v19.3.0 (2024-02-23)
- Added defaultToFirstCountry option
v19.2.19 (2024-02-15)
- Include selected country code with hiddenInput
v19.2.16 (2024-02-02)
- Bugfix
v19.2.15 (2024-01-29)
- Bugfix
v19.2.14 (2024-01-26)
- Handle accented chars in search
v19.2.12 (2024-01-23)
- Bugfixes
v19.2.11 (2024-01-20)
- Bugfixes
v19.2.3 (2024-01-18)
- Update
- Added IntlTelInput react component
v19.1.1 (2024-01-17)
- Bugfix
- Added formatAsYouType option
v19.0.2 (2024-01-16)
- Bugfix
v19.0.0 (2024-01-16)
- Enable countrySearch and fixDropdownWidth by default
- Change hiddenInput to take a function
- Rename localizedCountries to i18n
- Rename customContainer option to containerClass
- Rename separateDialCode to showSelectedDialCode
- Rename validation methods
- Cleanup old IE11 fixes
- Styling tweaks
v18.5.3 (2024-01-15)
- Fix dropdown width when using dropdownContainer
v18.5.0 (2024-01-14)
- Added countrySearch option
v18.4.0 (2024-01-14)
- Simplify media queries
- New option: fixDropdownWidth
- Fix disabled styling
- Move fullscreen class to the dropdownContainer
v18.3.4 (2024-01-03)
- fix: updating to verify the existance of window or navigator to work on ssr
v18.3.3 (2023-12-09)
- remove western sahara country
- useFullscreenPopup option
- bugfixes
v18.2.1 (2023-07-31)
- Bugfix
v18.2.0 (2023-07-31)
- Add isPossibleNumber method
v18.1.8 (2023-07-07)
- update
v18.1.7 (2023-06-24)
- update
v18.1.6 (2023-05-23)
- 1415 and 1419 screen reader enhancements
v18.1.4 (2023-04-21)
- Update
v18.1.3 (2023-04-15)
- Update
v18.1.1 (2023-04-13)
- Simplify nationalMode option. Previously, when nationalMode was set to false, the plugin was needlessly creating a worse UX for users who typed a valid national number in 2 situations: (1) it wouldn't update the flag between NANP countries if you typed a different area code (in national format), and (2) isValidNumber would return false for a valid national number.
v18.1.0 (2023-04-10)
- Add showFlags option
v18.0.0 (2023-04-07)
- Remove autoHideDialCode option in favour of new autoInsertDialCode option
- Allow nationalMode to be used with separateDialCode
v17.0.21 (2023-03-10)
- Update north macedonia in data.js
v17.0.19 (2022-09-14)
- Updating libphonenumber to version v8.12.54
v17.0.18 (2022-07-16)
- Update
v17.0.17 (2022-05-31)
- Update
v17.0.16 (2022-03-15)
- Update
v17.0.15 (2021-11-30)
- Update
v17.0.13 (2021-05-30)
- Update
v17.0.12 (2021-02-14)
- Update
v17.0.11 (2021-02-08)
- Update
v17.0.10 (2021-02-07)
- Update
v17.0.8 (2020-10-21)
- Update
v17.0.6 (2020-10-08)
- Update
v17.0.5 (2020-09-21)
- Update
v17.0.2 (2020-05-25)
- Update
v17.0.0 (2020-04-19)
- Update validationError enum in utils.js to match latest version of libphonenumber
- Change ID attributes to be unique (both within the dropdown e.g. dupe countries in preferred section, AND across multiple instances of the plugin)
v16.1.0 (2020-04-11)
- Update
v16.0.15 (2020-04-05)
- Update
v16.0.14 (2020-04-03)
- Update
v16.0.11 (2020-02-13)
- Update
v16.0.10 (2020-02-10)
- Update
v16.0.8 (2019-11-29)
- Update
v16.0.7 (2019-10-25)
- Update
v16.0.6 (2019-10-21)
- Add navigation with arrows support for IE
v16.0.5 (2019-10-10)
- Update
v16.0.4 (2019-09-23)
- Update
v16.0.3 (2019-09-01)
- Update
v16.0.2 (2019-07-08)
- Fixed issue with invalid `remove` function in IE11.
v16.0.1 (2019-07-04)
- Updated
v16.0.0 (2019-06-24)
- Switched CSS class names to use BEM, so you shouldn't get any more clashes with generic class names like "highlight".
- All NANP countries now have just +1 as their dialCode, when some used to include the area code e.g. Barbados used to have dial code +1246 and now has just +1.
v15.1.2 (2019-06-17)
- Fix: getNumber sometimes returning just dial code
v15.1.0 (2019-05-23)
- Accessibility: focus highlighted list item
v15.0.1 (2019-03-04)
- Update
v15.0.0 (2019-02-11)
- Change behaviour of autoHideDialCode option
v14.1.0 (2019-02-10)
- added getInstance static method
v14.0.10 (2019-02-06)
- Update
v14.0.9 (2019-02-05)
- Update
v14.0.8 (2019-01-28)
- Update
v14.0.7 (2019-01-07)
- Update
v14.0.6 (2018-11-21)
- Update
v14.0.5 (2018-11-08)
- Update
v14.0.4 (2018-11-02)
- Update
v14.0.3 (2018-10-07)
- Update
v14.0.2 (2018-09-26)
- Update
v13.0.4 (2018-09-14)
- Update
v13.0.3 (2018-08-25)
- Update
v12.4.0 (2018-06-24)
- Update
v12.3.0 (2018-06-11)
- Update
v10.0.1 (2016-12-15)
- rename numberType option to placeholderNumberType
- rename formatOnInit to formatOnDisplay
v9.2.7 (2016-12-08)
- separate allowDropdown and separateDialCode options
- make defaults object accessible from outside
- bug fixes
v9.2.6 (2016-12-03)
- update
v9.2.5 (2016-12-01)
- fix issue: libphonenumber methods expect NANP numbers to include area code
v9.2.4 (2016-11-01)
- separate allowDropdown and separateDialCode options
v9.2.3 (2016-10-12)
- separate allowDropdown and separateDialCode options
- make defaults object accessible from outside
- bug fixes
This awesome jQuery plugin is developed by jackocnr. For more Advanced Usages, please check the demo page or visit the official website.