intl tel input
v24.7.0
НОВОСТЬ: теперь у нас есть собственный компонент Vue!
НОВОСТЬ: теперь у нас есть собственный компонент React! Поиграйте с ним в Storybook.
?️ НОВОСТЬ: теперь мы выполняем переводы более чем на 30 языков! Посмотрите их в действии.
Международный телефонный ввод — это плагин JavaScript для ввода и проверки международных телефонных номеров. Он принимает обычное поле ввода, добавляет раскрывающийся список стран с возможностью поиска, автоматически определяет страну пользователя, отображает соответствующий номер-заполнитель, форматирует число по мере его ввода и предоставляет комплексные методы проверки. Также включены компоненты React и Vue.
Если плагин окажется для вас полезным, рассмотрите возможность поддержки проекта.
Используйте API Twilio для создания проверки телефона, двухфакторной аутентификации по SMS, напоминаний о встречах, маркетинговых уведомлений и многого другого. Нам не терпится увидеть, что вы создадите.
Теперь мы предоставляем компоненты React и Vue вместе с обычным плагином JavaScript. Этот файл readme предназначен для плагина JavaScript. Просмотрите файл readme для компонента React или файл readme для компонента Vue.
Вы можете просмотреть живую демонстрацию и увидеть несколько примеров использования различных опций. Альтернативно, попробуйте сами, загрузив проект и открыв demo.html в браузере.
По умолчанию на мобильных устройствах мы показываем полноэкранное всплывающее окно вместо встроенного раскрывающегося списка, чтобы лучше использовать ограниченное пространство экрана. Это похоже на то, как работает собственный элемент <select> . Вы можете контролировать это поведение с помощью опции useFullscreenPopup . Всплывающее окно можно закрыть, выбрав страну из списка или нажав на серую область по бокам. См. пример (с использованием компонента React).
| Хром | Firefox | Сафари | Край |
|---|---|---|---|
| ✓ | ✓ | v14+ | ✓ |
Примечание. Мы прекратили поддержку всех версий Internet Explorer, поскольку он больше не поддерживается ни одной версией Windows.
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css " > < script src =" https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.min.js " > </ script >
< script >
const input = document . querySelector ( "#phone" ) ;
window . intlTelInput ( input , {
loadUtilsOnInit : "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" ,
} ) ;
</ script > Установите с помощью npm: npm install intl-tel-input --save или Yarn: yarn add intl-tel-input
Импортируйте CSS: import 'intl-tel-input/build/css/intlTelInput.css';
Установите путь к flags.webp и global.webp в своем CSS, переопределив переменные CSS.
. iti {
--iti-path-flags-1x : url ( 'path/to/flags.webp' );
--iti-path-flags-2x : url ( 'path/to/[email protected]' );
--iti-path-globe-1x : url ( 'path/to/globe.webp' );
--iti-path-globe-2x : url ( 'path/to/[email protected]' );
} import intlTelInput from 'intl-tel-input' ;
const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils" )
} ) ; Большинство сборщиков пакетов (таких как Webpack, Vite или Parcel) увидят это, поместят скрипт утилит в отдельный пакет и загрузят его асинхронно только при необходимости. Если это не работает с вашим сборщиком или вы хотите загрузить модуль utils из какого-либо другого места (например, CDN), вы можете установить для параметра loadUtilsOnInit URL-адрес для загрузки в виде строки. Например:
import intlTelInput from 'intl-tel-input' ;
const input = document . querySelector ( "#phone" ) ;
intlTelInput ( input , {
loadUtilsOnInit : `https://cdn.jsdelivr.net/npm/intl-tel-input@ ${ intlTelInput . version } /build/js/utils.js` ;
} ) ; Загрузите последнюю версию или, еще лучше, установите ее с помощью npm.
Добавьте таблицу стилей
< link rel =" stylesheet " href =" path/to/intlTelInput.css " >. iti {
--iti-path-flags-1x : url ( 'path/to/flags.webp' );
--iti-path-flags-2x : url ( 'path/to/[email protected]' );
--iti-path-globe-1x : url ( 'path/to/globe.webp' );
--iti-path-globe-2x : url ( 'path/to/[email protected]' );
} < script src =" path/to/intlTelInput.js " > </ script >
< script >
const input = document . querySelector ( "#phone" ) ;
window . intlTelInput ( input , {
loadUtilsOnInit : "path/to/utils.js"
} ) ;
</ script > Мы настоятельно рекомендуем вам загрузить прилагаемый файл utils.js, который обеспечивает форматирование, проверку и т. д. Тогда плагин всегда будет работать с числами в полном международном формате (например, «+17024181234») и соответствующим образом преобразовывать их — даже если nationalMode или separateDialCode включен. Для простоты мы рекомендуем получать, хранить и устанавливать номера исключительно в этом формате — тогда вам не придется обрабатывать код страны отдельно, поскольку полные международные номера включают информацию о коде страны.
Вы всегда можете получить полный международный номер (включая код страны), используя getNumber , затем вам нужно сохранить только одну строку в своей базе данных (вам не нужно хранить страну отдельно), а затем при следующей инициализации плагина с этим номером на входе он автоматически установит страну и отформатирует ее в соответствии с указанными вами параметрами (например, при использовании nationalMode он автоматически отобразит номер в национальном формате, удалив международный код набора).
Если вы знаете страну пользователя, вы можете установить ее с помощью initialCountry (например "us" для США), а если вы этого не знаете, мы рекомендуем установить для initialCountry "auto" (вместе с опцией geoIpLookup ), чтобы определить страну пользователя. страну на основе их IP-адреса — см. пример.
Если вы знаете язык пользователя, вы можете использовать включенные переводы для локализации названий стран (и т. д.) — см. пример.
Когда вы инициализируете плагин, первым аргументом является элемент ввода, а вторым — объект, содержащий любые параметры инициализации, которые вы хотите, которые подробно описаны ниже. Примечание. Любые параметры, использующие коды стран, должны иметь коды ISO 3166-1 альфа-2.
разрешитьвыпадающий список
Тип: Boolean Значение по умолчанию: true
Разрешить или нет раскрывающийся список. Если этот параметр отключен, стрелка раскрывающегося списка отсутствует, и выбранная страна недоступна для щелчка. Кроме того, если включена функция showFlags, выбранный флаг отображается справа, поскольку это всего лишь маркер состояния. Обратите внимание, что если separateDialCode включен, для allowDropdown принудительно устанавливается значение true , поскольку в этом случае раскрывающийся список требуется, когда пользователь вводит «+». Поиграйте с этой опцией в Storybook (используя компонент React).
автозаполнитель
Тип: String По умолчанию: "polite"
Установите заполнитель ввода на номер примера для выбранной страны и обновите его, если страна изменится. Вы можете указать тип номера, используя опцию placeholderNumberType . По умолчанию для него установлено значение "polite" , что означает, что заполнитель будет установлен только в том случае, если во входных данных его еще нет. Вы также можете установить его на "aggressive" , который заменит любой существующий заполнитель, или "off" . Требуется загрузка скрипта utils.
класс контейнера
Тип: String По умолчанию: ""
Дополнительные классы для добавления во внедрённую оболочку <div> .
странаЗаказать
Тип: Array Значение по умолчанию: null
Укажите порядок списка стран с помощью массива кодов стран ISO2. Любые пропущенные страны появятся после указанных, например, установка countryOrder на ["jp", "kr"] приведет к появлению списка: Япония, Южная Корея, Афганистан, Албания, Алжир и т. д.
странаПоиск
Тип: Boolean Значение по умолчанию: true
Добавьте поле поиска в верхнюю часть раскрывающегося списка, чтобы пользователи могли фильтровать отображаемые страны.
пользовательский заполнитель
Тип: Function Значение по умолчанию: null
Измените заполнитель, созданный autoPlaceholder. Должен вернуть строку.
intlTelInput ( input , {
customPlaceholder : function ( selectedCountryPlaceholder , selectedCountryData ) {
return "e.g. " + selectedCountryPlaceholder ;
} ,
} ) ; выпадающийКонтейнер
Тип: Node Значение по умолчанию: null
Ожидается узел, например document.body . Вместо того, чтобы размещать разметку раскрывающегося списка страны рядом с входными данными, добавьте ее к указанному узлу, и затем она будет расположена рядом с входными данными с помощью JavaScript (с использованием position: fixed ). Это полезно, когда ввод находится внутри контейнера с overflow: hidden . Обратите внимание, что позиционирование нарушается при прокрутке, поэтому раскрывающийся список автоматически закрывается при прокрутке window .
исключитьСтраны
Тип: Array По умолчанию: []
В раскрывающемся списке отобразите все страны, кроме тех, которые вы здесь указываете. Поиграйте с этой опцией в Storybook (используя компонент React).
fixDropdownWidth
Тип: Boolean Значение по умолчанию: true
Исправьте ширину раскрывающегося списка, равную ширине ввода (а не такой же, как самое длинное название страны). Поиграйте с этой опцией в Storybook (используя компонент React).
форматAsYouType
Тип: Boolean Значение по умолчанию: true
Автоматически форматировать номер по мере ввода пользователем. Эта функция будет отключена, если пользователь вводит собственные символы форматирования. Требуется загрузка скрипта utils.
формат на дисплее
Тип: Boolean Значение по умолчанию: true
Отформатируйте входное значение (в соответствии с опцией nationalMode ) во время инициализации и в setNumber . Требуется загрузка скрипта utils.
geoIpLookup
Тип: Function Значение по умолчанию: null
При установке для initialCountry "auto" вы должны использовать этот параметр, чтобы указать пользовательскую функцию, которая вызывает службу поиска IP-адресов, чтобы получить местоположение пользователя, а затем вызывает обратный вызов success с соответствующим кодом страны. Также обратите внимание, что при создании экземпляра плагина объект Promise возвращается в свойстве экземпляра promise , поэтому вы можете сделать что-то вроде iti.promise.then(...) чтобы узнать, когда такие запросы инициализации были завершены.
Вот пример использования службы ipapi:
intlTelInput ( input , {
initialCountry : "auto" ,
geoIpLookup : function ( success , failure ) {
fetch ( "https://ipapi.co/json" )
. then ( function ( res ) { return res . json ( ) ; } )
. then ( function ( data ) { success ( data . country_code ) ; } )
. catch ( function ( ) { failure ( ) ; } ) ;
}
} ) ; Обратите внимание, что обратный вызов failure должен быть вызван в случае ошибки, поэтому в этом примере используется catch() . Совет: сохраните результат в файле cookie, чтобы избежать повторного поиска!
скрытый ввод
Тип: Function Значение по умолчанию: null
Позволяет создавать скрытые поля ввода в форме для хранения полного международного номера телефона и выбранного кода страны. Он принимает функцию, которая получает в качестве аргумента имя основного телефонного входа. Эта функция должна возвращать объект со свойствами phone и (необязательно) country , чтобы указать имена скрытых входов для номера телефона и кода страны соответственно. Это полезно для отправки форм, отличных от Ajax, чтобы обеспечить захват полного международного номера и кода страны, особенно когда включен nationalMode .
* Примечание . Для этой функции требуется, чтобы ввод находился внутри элемента <form> , поскольку он прослушивает событие submit в ближайшем элементе формы. Также обратите внимание, что, поскольку здесь используется внутренний getNumber , во-первых, он требует загрузки сценария utils, а во-вторых, он ожидает допустимого числа и поэтому будет работать правильно, только если вы использовали isValidNumber для проверки числа, прежде чем разрешить отправку формы.
intlTelInput ( input , {
hiddenInput : function ( telInputName ) {
return {
phone : "phone_full" ,
country : "country_code"
} ;
}
} ) ;Это создаст следующие (скрытые) элементы, которые будут автоматически заполнены при отправке:
< input type =" hidden " name =" phone_full " >
< input type =" hidden " name =" country_code " > i18n
Тип: Object Значение по умолчанию: {}
Разрешить локализацию/настройку более чем 200 названий стран, а также другого текста пользовательского интерфейса (например, текста-заполнителя для ввода поиска страны). Самый простой способ сделать это — просто импортировать один из предоставленных модулей перевода и установить для i18n это значение (см. вариант 1 ниже). Таким образом вы также можете переопределить одну или несколько отдельных клавиш (см. вариант 1 ниже). Кроме того, вы можете предоставить свои собственные переводы (см. вариант 2 ниже). Если вы предоставляете свои собственные, вам нужно будет указать все названия стран (которые можно скопировать из проекта списка стран, например, вот названия стран на французском языке), а также несколько строк пользовательского интерфейса (перечислены ниже). См. пример.
Если в настоящее время мы не поддерживаем нужный вам язык, вы можете легко добавить его самостоятельно — вам нужно всего лишь предоставить несколько строк перевода пользовательского интерфейса, поскольку мы автоматически извлекаем названия стран из проекта списка стран.
Вариант 1: импортируйте один из предоставленных модулей перевода.
import { fr } from "intl-tel-input/i18n" ;
intlTelInput ( input , {
i18n : fr ,
} ) ;
// or to override one or more keys, you could do something like this
intlTelInput ( input , {
i18n : {
... fr ,
searchPlaceholder : "Recherche de pays" ,
} ,
} ) ;Вариант 2: определите свои собственные переводы
intlTelInput ( input , {
i18n : {
// Country names - see the full list in src/js/intl-tel-input/i18n/en/countries.ts
af : "Afghanistan" ,
al : "Albania" ,
dz : "Algeria" ,
as : "American Samoa" ,
ad : "Andorra" ,
...
// Aria label for the selected country element
selectedCountryAriaLabel : "Selected country" ,
// Screen reader text for when no country is selected
noCountrySelected : "No country selected" ,
// Aria label for the country list element
countryListAriaLabel : "List of countries" ,
// Placeholder for the search input in the dropdown
searchPlaceholder : "Search" ,
// Screen reader text for when the search produces no results
zeroSearchResults : "No results found" ,
// Screen reader text for when the search produces 1 result
oneSearchResult : "1 result found" ,
// Screen reader text for when the search produces multiple results
multipleSearchResults : "${count} results found" ,
}
} ) ; начальнаястрана
Тип: String По умолчанию: ""
Установите первоначальный выбор страны, указав ее код страны, например "us" для США. (Будьте осторожны, не делайте этого, если вы не уверены в стране пользователя, так как это может привести к сложным проблемам, если установлено неправильно, и пользователь автоматически заполняет свой национальный номер и отправляет форму без проверки - в некоторых случаях это может пройти проверку. и в конечном итоге вы можете сохранить номер с неправильным кодом набора). Вы также можете установить для initialCountry значение "auto" , которое будет искать страну пользователя по его IP-адресу (требуется опция geoIpLookup — см. пример). Обратите внимание: как бы вы ни использовали initialCountry , он не обновит выбор страны, если входные данные уже содержат номер с международным кодом набора.
loadUtilsOnInit (см. обсуждение v25)
Тип: String или () => Promise<module> По умолчанию: "" Пример: "/build/js/utils.js"
Это один из способов (ленивой) загрузки включенного utils.js (чтобы включить форматирование/проверку и т. д.) — дополнительные параметры см. в разделе Загрузка сценария утилит. Вам нужно будет разместить файл utils.js, а затем установить параметр loadUtilsOnInit для этого URL-адреса или, альтернативно, просто указать его на версию, размещенную на CDN, например "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" . "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" . Скрипт загружается с помощью оператора динамического импорта, что означает, что URL-адрес не может быть относительным — он должен быть абсолютным.
Альтернативно это может быть функция, возвращающая обещание для модуля utils. При использовании сборщика, такого как Webpack, это можно использовать, чтобы сообщить сборщику, что сценарий utils должен храниться в отдельном файле от остального кода. Например: { loadUtilsOnInit: () => import("intl-tel-input/utils") } .
Сценарий извлекается только при инициализации плагина и, кроме того, только после завершения загрузки страницы (в событии загрузки окна), чтобы предотвратить блокировку (размер сценария составляет ~ 260 КБ). При создании экземпляра плагина объект Promise возвращается в свойстве экземпляра promise , поэтому вы можете сделать что-то вроде iti.promise.then(callback) чтобы узнать, когда такие запросы инициализации завершились. Дополнительную информацию см. в разделе Скрипт утилит.
национальный режим
Тип: Boolean Значение по умолчанию: true
Форматируйте числа в национальном формате, а не в международном формате. Это относится к номерам-заполнителям и при отображении существующих номеров пользователей. Обратите внимание, что пользователи могут вводить свои номера в национальном формате — если они выбрали правильную страну, вы можете использовать getNumber для извлечения полного международного номера — см. пример. Рекомендуется оставить эту опцию включенной, чтобы побудить пользователей вводить свои номера в национальном формате, поскольку он обычно им более знаком и повышает удобство работы с пользователем.
толькоСтраны
Тип: Array По умолчанию: []
В раскрывающемся списке отображайте только указанные вами страны — см. пример.
заполнительNumberType
Тип: String По умолчанию: "MOBILE"
Укажите один из ключей перечисления intlTelInput.utils.numberType (например, "FIXED_LINE" ), чтобы установить тип числа, который будет использоваться в качестве заполнителя. Поиграйте с этой опцией в Storybook (используя компонент React).
показатьФлаги
Тип: Boolean Значение по умолчанию: true
Установите значение false, чтобы скрыть флаги, например, по политическим причинам. Вместо этого будет отображаться обычный значок глобуса. Поиграйте с этой опцией в Storybook (используя компонент React).
отдельныйDialCode
Тип: Boolean Значение по умолчанию: false
Отобразите международный телефонный код выбранной страны рядом с вводом, чтобы он выглядел как часть набранного номера. Поскольку пользователь не может редактировать отображаемый код набора, он может попытаться ввести новый - в этом случае, чтобы избежать наличия двух кодов набора рядом друг с другом, мы автоматически открываем раскрывающийся список стран и помещаем новый код набора во входные данные поиска. вместо. Таким образом, если они наберут +54, Аргентина будет выделена в раскрывающемся списке, и они смогут просто нажать Enter, чтобы выбрать ее, обновив отображаемый код набора (для этой функции необходимо, чтобы были allowDropdown и countrySearch ). Поиграйте с этой опцией в Storybook (используя компонент React).
строгий режим
Тип: Boolean Значение по умолчанию: false
Когда пользователь вводит данные, игнорируйте все ненужные символы. Пользователь может вводить только числовые символы и необязательный плюс в начале. Ограничьте длину максимальной допустимой длиной числа (это касается validationNumberType ). Требуется загрузка скрипта utils. См. пример.
использовать FullscreenPopup
Тип: Boolean Значение по умолчанию: true on mobile devices, false otherwise
Управляйте тем, когда список стран отображается в виде полноэкранного всплывающего окна, а не в виде встроенного раскрывающегося списка. По умолчанию оно отображается в виде полноэкранного всплывающего окна на мобильных устройствах (в зависимости от пользовательского агента и ширины экрана), чтобы лучше использовать ограниченное пространство (аналогично тому, как работает собственный <select> ), а также в виде встроенного раскрывающегося списка на более крупные устройства/экраны. Поиграйте с этой опцией в Storybook (используя компонент React).
utilsScript
Тип: String или () => Promise<module> По умолчанию: "" Пример: "/build/js/utils.js"
Эта опция устарела и переименована в loadUtilsOnInit . Пожалуйста, ознакомьтесь с подробностями об этой опции и используйте ее.
тип_номер_валидации
Тип: String По умолчанию: "MOBILE"
Укажите один из ключей из перечисления intlTelInput.utils.numberType (например, "FIXED_LINE" ), чтобы установить тип номера, который будет применяться во время проверки с помощью isValidNumber , а также длину номера, который будет применяться с помощью strictMode . Установите для него null чтобы не применять какой-либо конкретный тип.
В этих примерах iti относится к экземпляру плагина, который возвращается при инициализации плагина, например
const iti = intlTelInput ( input ) ; разрушать
Удалите плагин из ввода и отмените привязку всех прослушивателей событий.
iti . destroy ( ) ; getExtension
Получите расширение с текущего номера. Требуется загрузка скрипта utils.
const extension = iti . getExtension ( ) ; Возвращает строку. Например, если входное значение было "(702) 555-5555 ext. 1234" , это вернет "1234"
получить номер
Получите текущий номер в заданном формате (по умолчанию стандарт E.164). Различные форматы доступны в перечислении intlTelInput.utils.numberFormat , которое вы можете увидеть здесь. Требуется загрузка скрипта utils. Обратите внимание: даже если nationalMode включен, он все равно может возвращать полный международный номер. Также обратите внимание, что этот метод ожидает допустимого числа, поэтому его следует использовать только после проверки.
const number = iti . getNumber ( ) ;
// or
const number = iti . getNumber ( intlTelInput . utils . numberFormat . E164 ) ; Возвращает строку, например "+17024181234"
getNumberType
Получите тип (фиксированный/мобильный/бесплатный и т. д.) текущего номера. Требуется загрузка скрипта utils.
const numberType = iti . getNumberType ( ) ; Возвращает целое число, которое можно сопоставить с различными параметрами перечисления intlTelInput.utils.numberType например
if ( numberType === intlTelInput . utils . numberType . MOBILE ) {
// is a mobile number
} Обратите внимание, что в США нет возможности различать номера фиксированной и мобильной связи, поэтому вместо этого будет возвращен FIXED_LINE_OR_MOBILE .
getSelectedCountryData
Получите данные о стране для выбранной в данный момент страны.
const countryData = iti . getSelectedCountryData ( ) ;Возвращает что-то вроде этого:
{
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} getValidationError
Получите дополнительную информацию об ошибке проверки. Требуется загрузка скрипта utils.
const error = iti . getValidationError ( ) ; Возвращает целое число, которое можно сопоставить с различными параметрами перечисления intlTelInput.utils.validationError , например
if ( error === intlTelInput . utils . validationError . TOO_SHORT ) {
// the number is too short
} isValidNumber
Проверьте, действителен ли текущий номер, исходя из его длины — см. пример, которого должно быть достаточно для большинства случаев использования. См. isValidNumberPrecise для более точной проверки, но преимущество isValidNumber заключается в том, что он гораздо более ориентирован на будущее, поскольку, хотя страны по всему миру регулярно обновляют свои правила нумерации, они очень редко меняют длину своих номеров. Если этот метод возвращает false , вы можете использовать getValidationError для получения дополнительной информации. Уважает параметр validationNumberType (по умолчанию для которого установлено значение «MOBILE»). Требуется загрузка скрипта utils.
const isValid = iti . isValidNumber ( ) ; Возвращает: true / false
isValidNumberPrecision
Проверьте, действителен ли текущий номер, используя точные правила соответствия для каждого кода страны/региона и т. д. — см. пример. Обратите внимание, что эти правила меняются каждый месяц для разных стран мира, поэтому вам нужно быть осторожным и поддерживать плагин в актуальном состоянии, иначе вы начнете отклонять действительные номера. Более простую и перспективную форму проверки см. в разделе isValidNumber выше. Если проверка не удалась, вы можете использовать getValidationError , чтобы получить дополнительную информацию. Требуется загрузка скрипта utils.
const isValid = iti . isValidNumberPrecise ( ) ; Возвращает: true / false
УстановитьСтрана
Изменить выбранную страну. Это должно быть сделано редко, если вообще когда-либо, поскольку выбранная страна обновляется автоматически при вызове setNumber и передаче номера, включая международный код набора, что является рекомендуемым использованием. Обратите внимание, что вы можете опустить аргумент кода страны, чтобы установить страну в пустое состояние по умолчанию (глобус).
iti . setCountry ( "gb" ) ; setNumber
Вставьте номер и соответствующим образом обновите выбранную страну. Обратите внимание: если formatOnDisplay включен, будет предпринята попытка отформатировать номер в национальном или международном формате в соответствии с параметром nationalMode .
iti . setNumber ( "+447733123456" ) ; setPlaceholderNumberType
Измените параметр PlaceholderNumberType.
iti . setPlaceholderNumberType ( "FIXED_LINE" ) ; УстановитьОтключено
Обновляет отключенный атрибут как телефонного входа, так и кнопки выбранной страны. Принимает логическое значение. Примечание. Мы рекомендуем использовать это вместо непосредственного обновления отключенного атрибута ввода.
iti . setDisabled ( true ) ; GetCountryData
Получите данные о стране из плагина — либо для повторного использования в другом месте, например, для создания собственного раскрывающегося списка стран — см. пример, либо, альтернативно, вы можете использовать их для изменения данных о стране. Обратите внимание, что любые изменения необходимо внести до инициализации плагина.
const countryData = intlTelInput . getCountryData ( ) ;Возвращает массив объектов страны:
[ {
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} , ... ] получить экземпляр
После инициализации плагина вы всегда можете снова получить доступ к экземпляру, используя этот метод, просто передав соответствующий элемент ввода.
const input = document . querySelector ( '#phone' ) ;
const iti = intlTelInput . getInstance ( input ) ;
iti . isValidNumber ( ) ; // etc loadUtils (см. обсуждение v25)
Альтернатива опции loadUtilsOnInit . Этот метод позволяет вручную загружать сценарий utils.js по требованию, чтобы включить форматирование/проверку и т. д. Дополнительные сведения см. в разделе Загрузка сценария служебных программ. Этот метод следует вызывать только один раз на странице. Возвращается объект Promise, поэтому вы можете использовать loadUtils().then(callback) чтобы узнать, когда он завершится.
// Load from a URL:
intlTelInput . loadUtils ( "/build/js/utils.js" ) ;
// Or manage load via some other method with a function:
intlTelInput . loadUtils ( async ( ) => {
// Your own loading logic here. Return a JavaScript "module" object with
// the utils as the default export.
return { default : { /* a copy of the utils module */ } }
} ) ; Вы можете прослушивать следующие события, вызванные входным элементом.
смена страны
Это срабатывает, когда выбранная страна обновляется, например, если пользователь выбирает страну из раскрывающегося списка, или он вводит другой код набора во входные данные, или вы вызываете setCountry и т. д.
input . addEventListener ( "countrychange" , function ( ) {
// do something with iti.getSelectedCountryData()
} ) ;См. пример здесь: Синхронизация страны.
открыть: выпадающий список стран
Это срабатывает, когда пользователь открывает раскрывающийся список.
закрыть: выпадающий список стран
Это срабатывает, когда пользователь закрывает раскрывающийся список.
Для оформления тем доступно множество переменных CSS. Полный список см. в intlTelInput.scss.
Что касается пустого состояния (значок глобуса), версия по умолчанию темно-серая, и мы также предоставляем «светлую» версию, которая должна лучше работать с темной темой. Кроме того, значок глобуса можно легко воссоздать в любом цвете, который вам нужен для вашей темы. Мы рекомендуем загрузить его в максимально возможном разрешении, а затем масштабировать изображение до необходимых размеров (ширина 20 пикселей для версии по умолчанию и ширина 40 пикселей для версии @2x).
Пример темного режима (скриншот ниже):
@media ( prefers-color-scheme : dark) {
. iti {
--iti-border-color : # 5b5b5b ;
--iti-dialcode-color : # 999999 ;
--iti-dropdown-bg : # 0d1117 ;
--iti-arrow-color : # aaaaaa ;
--iti-hover-color : # 30363d ;
--iti-path-globe-1x : url ( "path/to/globe_light.webp" );
--iti-path-globe-2x : url ( "path/to/[email protected]" );
}
}
