İçerik Akışı

Kategoriler

Tüm İçerikler

Demolar

İletişim
Javascript

jQuery-HTML ile uluslar arası telefon numarası kodu

  1. Anasayfa
  2. Kategori
  3. Javascript
  4. jQuery-HTML ile uluslar arası telefon numarası kodu

Demo / Download

Uluslararası Telefon Girişi, standart girişi ulusal bayrak açılır listesiyle Uluslararası Telefon Girişine dönüştüren kullanışlı bir JavaScript jQuery eklentisidir.

Açılır listeye tıklandığında bayraklarının yanında tüm ülkeler ve uluslararası telefon kodları listelenir. Web sitenizin uluslararası ziyaretçileri için idealdir.

See Also:

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="" id="telephone">

3. Include the International Telephone Input plugin at the bottom of your page.

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

4. Initialize the plugin and we're done.

1 // Vanilla Javascript
2 var input = document.querySelector("#telephone");
3 window.intlTelInput(input,({
4   // options here
5 }));

5. All default options to customize the plugin.

001 // whether or not to allow the dropdown
002 allowDropdown:true,
003  
004 // add a placeholder in the input with an example number for the selected country
005 autoPlaceholder:"polite",
006  
007 // add a country search input at the top of the dropdown
008 countrySearch:true,
009  
010 // modify the parentClass
011 containerClass:"",
012  
013 // Specify the ordering for the country list with an array of iso2 country codes.
014 // Any ommitted countries will appear after those specified
015 // e.g. setting countryOrder to ["jp", "kr"] will result in the list: Japan, South Korea, Afghanistan, Albanbia, Algeria etc...
016 countryOrder:null,
017  
018 // Add a search input to the top of the dropdown
019 countrySearch:true,
020  
021 // modify the auto placeholder
022 customPlaceholder:null,
023  
024 // append menu to specified element
025 dropdownContainer:null,
026  
027 // don't display these countries
028 excludeCountries: [],
029  
030 // fix the dropdown width to the input width (rather than being as wide as the longest country name)
031 fixDropdownWidth:true,
032  
033 // format the number as the user types
034 formatAsYouType:true,
035  
036 // format the input value during initialisation and on setNumber
037 formatOnDisplay:true,
038  
039 // geoIp lookup function
040 geoIpLookup:null,
041  
042 // inject a hidden input with the name returned from this function, and on submit, populate it with the result of getNumber
043 hiddenInput:null,
044  
045 // internationalise the plugin text e.g. search input placeholder, country names
046 i18n: {
047  
048   // Country names
049   af:"Afghanistan",
050   al:"Albania",
051   dz:"Algeria",
052   as:"American Samoa",
053   ad:"Andorra",
054   // ...
055  
056   // Aria label for the selected country element
057   selectedCountryAriaLabel:"Selected country",
058  
059   // Screen reader text for when no country is selected
060   noCountrySelected:"No country selected",
061  
062   // Aria label for the country list element
063   countryListAriaLabel:"List of countries",
064  
065   // Placeholder for the search input in the dropdown
066   searchPlaceholder:"Search",
067  
068   // Screen reader text for when the search produces no results
069   zeroSearchResults:"No results found",
070  
071   // Screen reader text for when the search produces 1 result
072   oneSearchResult:"1 result found",
073  
074   // Screen reader text for when the search produces multiple results, where ${count} will be replaced by the count
075   multipleSearchResults:"${count} results found",
076    
077 }
078  
079 // Aria label for the selected country element
080 selectedCountryAriaLabel:"Selected country",
081  
082 // initial country
083 initialCountry:"",
084  
085 // determines the number type to enforce during validation with isValidNumber
086 validationNumberType: 'MOBILE',
087  
088 // national vs international formatting for numbers e.g. placeholders and displaying existing numbers
089 nationalMode: true,
090  
091 // display only these countries
092 onlyCountries: [],
093  
094 // number type to use for placeholders
095 placeholderNumberType: "MOBILE",
096  
097 // the countries at the top of the list
098 preferredCountries: [],
099  
100 // option to hide the flags - must be used with showSelectedDialCode, or allowDropdown=false
101 showFlags: true,
102  
103 // Display the selected country dial code next to the input
104 separateDialCode: false,
105  
106 // display the international dial code next to the selected flag
107 showSelectedDialCode: false,
108  
109 // only allow certain chars e.g. a plus followed by numeric digits, and cap at max valid length
110 strictMode: false,
111  
112 // use full screen https://www.jqueryscript.net/tags.php?/popup/">popup instead of dropdown for country list
113 useFullscreenPopup: typeof navigator !== "undefined" && typeof window !== "undefined" ? (
114   // we cannot just test screen size as some smartphones/website meta tags will report desktop
115   // resolutions
116   // Note: to target https://www.jqueryscript.net/tags.php?/Android/">Android Mobiles (and not Tablets), we must find 'Android' and 'Mobile'
117   /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
118     navigator.userAgent
119   ) || window.innerWidth <= 500
120 ) :false,
121  
122 // specify the path to the libphonenumber script to enable validation/formatting
123 loadUtilsOnInit:""
124 // or loadUtilsOnInit: () => import("/path/to/utils.js")
125  
126 // determine the number type to enforce during validation with isValidNumber, as well as the number length to enforce with strictMode
127 validationNumberType:"MOBILE",

6. API methods.

01 // destroy
02 instance.destroy();
03  
04 // Get the extension part of the current number
05 var extension = instance.getExtension();
06  
07 // Get the current number in the given format
08 var intlNumber = instance.getNumber();
09  
10 // Get the type (fixed-line/mobile/toll-free etc) of the current number.
11 var numberType = instance.getNumberType();
12  
13 // Get the country data for the currently selected flag.
14 var countryData = instance.getSelectedCountryData();
15  
16 // Get more information about a validation error.
17 var error = instance.get"https://www.jqueryscript.net/tags.php?/Validation/">ValidationError();
18  
19 // Valihttps://www.jqueryscript.net/time-clock/">date the current number
20 var isValid = instance.isValidNumber();
21  
22 // Check if the current number is valid using precise matching rules for each country/area code etc
23 var isValid = instance.isValidNumberPrecise();
24  
25 // Change the country selection
26 instance.selectCountry("gb");
27  
28 // Insert a number, and update the selected flag accordingly.
29 instance.setNumber("+44 7733 123 456");
30  
31 // Change the placeholderNumberType option.
32 instance.setPlaceholderNumberType("FIXED_LINE");
33  
34 // Update the disabled attribute of both the telephone input and selected country button
35 instance.setDisabled(true);
36  
37 // Load the utils.js script (included in the lib directory) to enable formatting/validation etc.
38 window.intlTelInputGlobals.loadUtils("build/js/utils.js");
39  
40 // Get all the country data
41 window.intlTelInputGlobals.getCountryData();
42  
43 // Get instance
44 window.intlTelInputGlobals.getInstance(input);

7. Event handlers.

01 input.addEventListener("countrychange",function() {
02   // do something with iti.getSelectedCountryData()
03 });
04  
05 input.addEventListener("open:countrydropdown",function() {
06   // triggered when the user opens the dropdown
07 });
08  
09 input.addEventListener("close:countrydropdown",function() {
10   // triggered when the user closes the dropdown
11 });

Changelog:

v24.6.0 (2024-10-07)

  • Deprecated utilsScript option, in favour of new loadUtilsOnInit option

v24.5.2 (2024-10-03)

  • strictMode fix: cannot type russian placeholder number

v24.5.1 (2024-10-03)

  • Fix: strictMode cap broken when cursor not at end
  • Update utils to libphonenumber v8.13.46

v24.5.0 (2024-09-14)

  • feat: Add Norwegian and Vietnamese translations for country and interface
  • Update utils to libphonenumber

v24.4.0 (2024-09-05)

  • Fix incomplete Vue validation demo
  • Add new Vue demos for set-number and toggle-disabled
  • Add inputProps prop to Vue component to allow setting input attributes
  • Format Vue component code using Prettier

v24.3.5 (2024-08-29)

  • Country search: support initials
  • New, consistent 4:3 flag icons
  • Removed deprecated CSS vars: --iti-text-gray and --iti-border-gray
  • feat: Add Polish translations for country and interface
  • Remove opinionated padding on search-input - should use the websites default
  • 1px border-radius on flags
  • Support 2 vue builds - with/without utils
  • add guard
  • Support separateDialCode=true and countrySearch=false
  • Include vue build files in package.json files
  • validation requires a valid selected country
  • Fix process.env.version in vue files

v23.9.x (2024-08-18)

  • DRY up translation types
  • Include all translation types
  • Remove unused translations
  • Add types to i18n section of package.json
  • Update dependencies

v23.8.x (2024-08-08)

  • add setDisabled() for disabling both list and input
  • add react support
  • bugfixes

v23.7.x (2024-07-26)

  • Add Bosnian and Croatian translations
  • Update utils to libphonenumber v8.13.42
  • Fix: country names with accents should not be pushed to end of list

v23.6.x (2024-07-22)

  • Added CA, CS, IT, SK
  • No need for tabindex when its a button element
  • Fix validationNumberType=FIXED_LINE_OR_MOBILE
  • Fix: selectedCountry focusable when input disabled
  • Update utils to libphonenumber v8.13.40

v23.5.x (2024-07-18)

  • Use webp images instead

v23.3.x (2024-07-17)

  • Easier dark mode theming
  • light globe icon for dark mode
  • Re-add countrySearch option

v23.1.0 (2024-06-19)

  • Add Swedish and Finnish translations
  • Fix react ref Typescript types

v23.0.x (2024-06-15)

  • utilsScript option and loadUtils method now load the utils script using a dynamic import as opposed to injecting a new script tag.
  • To make this work, the utils script (build/js/utils.js) is now an ES Module, which no longer uses any globals, like window.intlTelInputUtils (etc). This means it will no longer work to pre-load the utils script yourself, hence the new bundles (see next point).
  • For those who are not worried about file size, we now provide two bundles which include the utils script: build/js/intlTelInputWithUtils.js and react/build/IntlTelInputWithUtils.js. If you're using ES Modules, you can import these as "intl-tel-input/intlTelInputWithUtils" and "intl-tel-input/reactWithUtils" respectively (TypeScript types included in the regular declaration files).
  • New option validationNumberType which defaults to "MOBILE" - this determines the number type to enforce during validation with isValidNumber, as well as the number length to enforce with strictMode. This replaces the mobileOnly argument which you could previously pass to isValidNumber.
  • Fix: static getCountryData missing country names
  • Fix setNumber not respecting formatOnDisplay=false
  • useCallback, and useEffect deps, etc
  • Fix: auto country ignored in some cases
  • Allow passing no arg to setCountry
  • Update utils to libphonenumber v8.13.38
  • Android fix separateDialCode plus issue

v22.0.x (2024-05-03)

  • Ignore enter when country search has no results
  • Force nationalMode false if no flags and no dial code
  • Switch translation files from .mjs to .js to increase compatibility e.g. esbuild
  • Dropped showSelectedDialCode in favour of new separateDialCode option
  • Dropped countrySearch option (leaving it enabled)
  • Dropped preferredCountries option in favour of new countryOrder option
  • Moved global variables window.intlTelInputGlobals and window.intlTelInputUtils to static variables on intlTelInput object e.g. intlTelInput.getCountryData() and intlTelInput.utils.getValidationError()
  • Switch translation files from .mjs to .js to increase compatibility e.g. esbuild

v21.2.x (2024-05-01)

  • 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


https://www.jqueryscript.net/form/jQuery-International-Telephone-Input-With-Flags-Dial-Codes.html
Kelimeler:
Cihan Özcan Editör
© copyright Kodvar.com 2025