международный телефонный ввод
v24.7.0
НОВОСТЬ: теперь у нас есть собственный компонент Vue!
НОВОСТЬ: теперь у нас есть собственный компонент React! Поиграйте с ним в Storybook.
?️ НОВОСТЬ: теперь мы выполняем переводы более чем на 30 языков! Посмотрите их в действии.
Международный телефонный ввод — это плагин JavaScript для ввода и проверки международных телефонных номеров. Он принимает обычное поле ввода, добавляет раскрывающийся список стран с возможностью поиска, автоматически определяет страну пользователя, отображает соответствующий номер-заполнитель, форматирует число по мере его ввода и предоставляет комплексные методы проверки. Также включены компоненты React и Vue.
Если плагин окажется для вас полезным, рассмотрите возможность поддержки проекта.
Используйте API Twilio для создания проверки телефона, двухфакторной аутентификации по SMS, напоминаний о встречах, маркетинговых уведомлений и многого другого. Нам не терпится увидеть, что вы создадите.
Теперь мы предоставляем компоненты React и Vue вместе с обычным плагином JavaScript. Этот файл readme предназначен для плагина JavaScript. Просмотрите файл readme для компонента React или файл readme для компонента Vue.
Вы можете просмотреть живую демонстрацию и увидеть несколько примеров использования различных опций. Альтернативно, попробуйте сами, загрузив проект и открыв demo.html в браузере.
По умолчанию на мобильных устройствах мы показываем полноэкранное всплывающее окно вместо встроенного раскрывающегося списка, чтобы лучше использовать ограниченное пространство экрана. Это похоже на то, как работает собственный элемент . Вы можете контролировать это поведение с помощью опции 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.
класс контейнера странаЗаказать странаПоиск пользовательский заполнитель выпадающийКонтейнер исключитьСтраны fixDropdownWidth форматAsYouType формат на дисплее geoIpLookup Вот пример использования службы ipapi: Обратите внимание, что обратный вызов скрытый ввод * Примечание . Для этой функции требуется, чтобы ввод находился внутри элемента Это создаст следующие (скрытые) элементы, которые будут автоматически заполнены при отправке: i18n Если в настоящее время мы не поддерживаем нужный вам язык, вы можете легко добавить его самостоятельно — вам нужно всего лишь предоставить несколько строк перевода пользовательского интерфейса, поскольку мы автоматически извлекаем названия стран из проекта списка стран. Вариант 1: импортируйте один из предоставленных модулей перевода. Вариант 2: определите свои собственные переводы начальнаястрана loadUtilsOnInit (см. обсуждение v25) Это один из способов (ленивой) загрузки включенного utils.js (чтобы включить форматирование/проверку и т. д.) — дополнительные параметры см. в разделе Загрузка сценария утилит. Вам нужно будет разместить файл utils.js, а затем установить параметр Альтернативно это может быть функция, возвращающая обещание для модуля utils. При использовании сборщика, такого как Webpack, это можно использовать, чтобы сообщить сборщику, что сценарий utils должен храниться в отдельном файле от остального кода. Например: Сценарий извлекается только при инициализации плагина и, кроме того, только после завершения загрузки страницы (в событии загрузки окна), чтобы предотвратить блокировку (размер сценария составляет ~ 260 КБ). При создании экземпляра плагина объект Promise возвращается в свойстве экземпляра национальный режим толькоСтраны заполнительNumberType показатьФлаги отдельныйDialCode строгий режим использовать FullscreenPopup utilsScript Эта опция устарела и переименована в тип_номер_валидации В этих примерах разрушать getExtension Возвращает строку. Например, если входное значение было получить номер Возвращает строку, например getNumberType Возвращает целое число, которое можно сопоставить с различными параметрами перечисления Обратите внимание, что в США нет возможности различать номера фиксированной и мобильной связи, поэтому вместо этого будет возвращен getSelectedCountryData Возвращает что-то вроде этого: getValidationError Возвращает целое число, которое можно сопоставить с различными параметрами перечисления isValidNumber Возвращает: isValidNumberPrecision Возвращает: УстановитьСтрана setNumber setPlaceholderNumberType УстановитьОтключено GetCountryData Возвращает массив объектов страны: получить экземпляр loadUtils (см. обсуждение v25) Вы можете прослушивать следующие события, вызванные входным элементом. смена страны См. пример здесь: Синхронизация страны. открыть: выпадающий список стран закрыть: выпадающий список стран Для оформления тем доступно множество переменных CSS. Полный список см. в intlTelInput.scss. Что касается пустого состояния (значок глобуса), версия по умолчанию темно-серая, и мы также предоставляем «светлую» версию, которая должна лучше работать с темной темой. Кроме того, значок глобуса можно легко воссоздать в любом цвете, который вам нужен для вашей темы. Мы рекомендуем загрузить его в максимально возможном разрешении, а затем уменьшить изображение до необходимых размеров (ширина 20 пикселей для версии по умолчанию и ширина 40 пикселей для версии @2x). Пример темного режима (скриншот ниже): ПРИМЕЧАНИЕ. Предполагается, что у вас уже есть собственный стиль темного режима для общего стиля тела/ввода, например что-то вроде этого: Пример: Мы предоставляем переводы более чем 200 названий стран, а также другого текста пользовательского интерфейса (например, текста-заполнителя для ввода поиска страны) на более чем 30 языков. Подробную информацию о том, как их использовать, см. в разделе Поддерживаемые языки: арабский, бенгальский, боснийский, болгарский, каталанский, китайский, хорватский, чешский, датский, голландский, норвежский, английский, фарси, финский, французский, немецкий, греческий, хинди, венгерский, индонезийский, итальянский, японский, корейский, маратхи. , польский, португальский, румынский, русский, словацкий, испанский, шведский, телугу, тайский, турецкий, урду, вьетнамский. Если в настоящее время мы не поддерживаем нужный вам язык, вы можете легко добавить его самостоятельно — вам нужно всего лишь предоставить несколько строк перевода пользовательского интерфейса, поскольку мы автоматически извлекаем названия стран из проекта списка стран. Скрипт утилит (build/js/utils.js) представляет собой специальную сборку libphonenumber от Google, которая обеспечивает следующие функции: Форматирование/проверка международных номеров сложна (это зависит от страны/района, и в настоящее время мы поддерживаем около 230 стран). Единственное комплексное решение, которое мы нашли, — это libphonenumber, из которого мы предварительно скомпилировали соответствующие части в один файл JavaScript, включенный в каталог сборки. К сожалению, даже после модификации он по-прежнему составляет ~260 КБ. См. раздел ниже о том, как лучше всего его загрузить. Чтобы самостоятельно перекомпилировать скрипт utils (например, чтобы обновить версию libphonenumber, на основе которой он создан), см. руководство по содействию. См. обсуждение v25. Сценарий utils предоставляет множество замечательных функций (см. раздел выше), но за это приходится платить увеличением размера файла (~ 260 КБ). Существует два основных способа загрузки сценария утилит, в зависимости от того, беспокоит ли вас размер файла или нет. Вариант 1: intlTelInputWithUtils Вариант 2: loadUtilsOnInit Альтернативно вы можете установить параметр Если вам нужен больший контроль над отложенной загрузкой этого файла, вы можете вручную вызвать статический метод Полноэкранный ввод dropdownContainer: раскрывающийся список не закрывается при прокрутке Входное поле Отображение сообщений об ошибках Раскрывающееся положение Заполнители Группы ввода начальной загрузки Инструкции по настройке проекта и внесению изменений см. в руководстве для участников, а также о том, как обновить libphonenumber до новой версии, как обновить изображения флагов или как добавить новый перевод. Пользовательское тестирование с помощью программы с открытым исходным кодом BrowserStack. Тестирование браузера через
Тип: String По умолчанию: ""
Дополнительные классы для добавления во внедрённую оболочку .
Тип: 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).
Тип: Boolean Значение по умолчанию: true
Исправьте ширину раскрывающегося списка, равную ширине ввода (а не такой же, как самое длинное название страны). Поиграйте с этой опцией в Storybook (используя компонент React).
Тип: Boolean Значение по умолчанию: true
Автоматически форматировать номер по мере ввода пользователем. Эта функция будет отключена, если пользователь вводит собственные символы форматирования. Требуется загрузка скрипта utils.
Тип: Boolean Значение по умолчанию: true
Отформатируйте входное значение (в соответствии с опцией nationalMode ) во время инициализации и в setNumber . Требуется загрузка скрипта utils.
Тип: Function Значение по умолчанию: null
При установке для initialCountry "auto" вы должны использовать эту опцию, чтобы указать пользовательскую функцию, которая вызывает службу поиска IP-адресов, чтобы получить местоположение пользователя, а затем вызывает обратный вызов success с соответствующим кодом страны. Также обратите внимание, что при создании экземпляра плагина объект Promise возвращается в свойстве экземпляра promise , поэтому вы можете сделать что-то вроде iti.promise.then(...) чтобы узнать, когда такие запросы инициализации были завершены. 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 . , поскольку он прослушивает событие 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 " >
Тип: Object Значение по умолчанию: {}
Разрешить локализацию/настройку более чем 200 названий стран, а также другого текста пользовательского интерфейса (например, текста-заполнителя для ввода поиска страны). Самый простой способ сделать это — просто импортировать один из предоставленных модулей перевода и установить для i18n это значение (см. вариант 1 ниже). Таким образом вы также можете переопределить одну или несколько отдельных клавиш (см. вариант 1 ниже). Кроме того, вы можете предоставить свои собственные переводы (см. вариант 2 ниже). Если вы предоставляете свои собственные, вам нужно будет указать все названия стран (которые можно скопировать из проекта списка стран, например, вот названия стран на французском языке), а также несколько строк пользовательского интерфейса (перечислены ниже). См. пример. 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" ,
} ,
} ) ;
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 , он не обновит выбор страны, если входные данные уже содержат номер с международным кодом набора.
Тип: String или () => Promise По умолчанию: "" Пример: "/build/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-адрес не может быть относительным — он должен быть абсолютным.{ loadUtilsOnInit: () => import("intl-tel-input/utils") } .promise , поэтому вы можете сделать что-то вроде iti.promise.then(callback) чтобы узнать, когда такие запросы инициализации завершились. Дополнительную информацию см. в разделе Скрипт утилит.
Тип: Boolean Значение по умолчанию: true
Форматируйте числа в национальном формате, а не в международном формате. Это относится к номерам-заполнителям и при отображении существующих номеров пользователей. Обратите внимание, что пользователи могут вводить свои номера в национальном формате — если они выбрали правильную страну, вы можете использовать getNumber для извлечения полного международного номера — см. пример. Рекомендуется оставить эту опцию включенной, чтобы побудить пользователей вводить свои номера в национальном формате, поскольку он обычно им более знаком и повышает удобство работы с пользователем.
Тип: Array По умолчанию: []
В раскрывающемся списке отображайте только указанные вами страны — см. пример.
Тип: String По умолчанию: "MOBILE"
Укажите один из ключей перечисления intlTelInput.utils.numberType (например, "FIXED_LINE" ), чтобы установить тип числа, который будет использоваться в качестве заполнителя. Поиграйте с этой опцией в Storybook (используя компонент React).
Тип: Boolean Значение по умолчанию: true
Установите значение false, чтобы скрыть флаги, например, по политическим причинам. Вместо этого будет отображаться обычный значок глобуса. Поиграйте с этой опцией в Storybook (используя компонент React).
Тип: Boolean Значение по умолчанию: false
Отобразите международный телефонный код выбранной страны рядом с вводом, чтобы он выглядел как часть набранного номера. Поскольку пользователь не может редактировать отображаемый код набора, он может попытаться ввести новый - в этом случае, чтобы избежать наличия двух кодов набора рядом друг с другом, мы автоматически открываем раскрывающийся список стран и помещаем новый код набора во входные данные для поиска. вместо. Таким образом, если они наберут +54, Аргентина будет выделена в раскрывающемся списке, и они смогут просто нажать Enter, чтобы выбрать ее, обновив отображаемый код набора (для этой функции необходимо, чтобы были allowDropdown и countrySearch ). Поиграйте с этой опцией в Storybook (используя компонент React).
Тип: Boolean Значение по умолчанию: false
Когда пользователь вводит данные, игнорируйте все ненужные символы. Пользователь может вводить только числовые символы и необязательный плюс в начале. Ограничьте длину максимальной допустимой длиной числа (это касается validationNumberType ). Требуется загрузка скрипта utils. См. пример.
Тип: Boolean Значение по умолчанию: true on mobile devices, false otherwise
Управляйте тем, когда список стран отображается в виде полноэкранного всплывающего окна, а не в виде встроенного раскрывающегося списка. По умолчанию оно отображается в виде полноэкранного всплывающего окна на мобильных устройствах (в зависимости от пользовательского агента и ширины экрана), чтобы лучше использовать ограниченное пространство (аналогично тому, как работает собственный ), а также в виде встроенного раскрывающегося списка на более крупные устройства/экраны. Поиграйте с этой опцией в Storybook (используя компонент React).
Тип: String или () => Promise По умолчанию: "" Пример: "/build/js/utils.js"loadUtilsOnInit . Пожалуйста, ознакомьтесь с подробностями об этой опции и используйте ее.
Тип: String По умолчанию: "MOBILE"
Укажите один из ключей перечисления intlTelInput.utils.numberType (например, "FIXED_LINE" ), чтобы установить тип номера, который будет применяться во время проверки с помощью isValidNumber , а также длину номера, который будет применяться с помощью strictMode . Установите для него null чтобы не применять какой-либо конкретный тип. Методы экземпляра
iti относится к экземпляру плагина, который возвращается при инициализации плагина, например const iti = intlTelInput ( input ) ;
Удалите плагин из ввода и отмените привязку всех прослушивателей событий. iti . destroy ( ) ;
Получите расширение с текущего номера. Требуется загрузка скрипта 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"
Получите тип (фиксированный/мобильный/бесплатный и т. д.) текущего номера. Требуется загрузка скрипта utils. const numberType = iti . getNumberType ( ) ;
intlTelInput.utils.numberType например if ( numberType === intlTelInput . utils . numberType . MOBILE ) {
// is a mobile number
}
FIXED_LINE_OR_MOBILE .
Получите данные о стране для выбранной в данный момент страны. const countryData = iti . getSelectedCountryData ( ) ;
{
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
}
Получите дополнительную информацию об ошибке проверки. Требуется загрузка скрипта utils. const error = iti . getValidationError ( ) ;
intlTelInput.utils.validationError , например if ( error === intlTelInput . utils . validationError . TOO_SHORT ) {
// the number is too short
}
Проверьте, действителен ли текущий номер, исходя из его длины — см. пример, которого должно быть достаточно для большинства случаев использования. См. isValidNumberPrecise для более точной проверки, но преимущество isValidNumber заключается в том, что он гораздо более ориентирован на будущее, поскольку, хотя страны по всему миру регулярно обновляют свои правила нумерации, они очень редко меняют длину своих номеров. Если этот метод возвращает false , вы можете использовать getValidationError для получения дополнительной информации. Уважает параметр validationNumberType (для которого по умолчанию установлено значение «MOBILE»). Требуется загрузка скрипта utils. const isValid = iti . isValidNumber ( ) ;
true / false
Проверьте, действителен ли текущий номер, используя точные правила соответствия для каждого кода страны/региона и т. д. — см. пример. Обратите внимание, что эти правила меняются каждый месяц для разных стран мира, поэтому вам нужно быть осторожным и поддерживать плагин в актуальном состоянии, иначе вы начнете отклонять действительные номера. Более простую и перспективную форму проверки см. в разделе isValidNumber выше. Если проверка не удалась, вы можете использовать getValidationError , чтобы получить дополнительную информацию. Требуется загрузка скрипта utils. const isValid = iti . isValidNumberPrecise ( ) ;
true / false
Изменить выбранную страну. Это должно быть сделано редко, если вообще когда-либо, поскольку выбранная страна обновляется автоматически при вызове setNumber и передаче номера, включая международный код набора, что является рекомендуемым использованием. Обратите внимание, что вы можете опустить аргумент кода страны, чтобы установить страну в пустое состояние по умолчанию (глобус). iti . setCountry ( "gb" ) ;
Вставьте номер и соответствующим образом обновите выбранную страну. Обратите внимание: если formatOnDisplay включен, будет предпринята попытка отформатировать номер в национальном или международном формате в соответствии с параметром nationalMode . iti . setNumber ( "+447733123456" ) ;
Измените параметр PlaceholderNumberType. iti . setPlaceholderNumberType ( "FIXED_LINE" ) ;
Обновляет отключенный атрибут как телефонного входа, так и кнопки выбранной страны. Принимает логическое значение. Примечание. Мы рекомендуем использовать это вместо непосредственного обновления отключенного атрибута ввода. iti . setDisabled ( true ) ;
Статические методы
Получите данные о стране из плагина — либо для повторного использования в другом месте, например, для создания собственного раскрывающегося списка стран — см. пример, либо, альтернативно, вы можете использовать их для изменения данных о стране. Обратите внимание, что любые изменения необходимо внести до инициализации плагина. const countryData = intlTelInput . getCountryData ( ) ;
[ {
name : "Afghanistan" ,
iso2 : "af" ,
dialCode : "93"
} , ... ]
После инициализации плагина вы всегда можете снова получить доступ к экземпляру, используя этот метод, просто передав соответствующий элемент ввода. const input = document . querySelector ( '#phone' ) ;
const iti = intlTelInput . getInstance ( input ) ;
iti . isValidNumber ( ) ; // etc
Альтернатива опции loadUtilsOnInit . Этот метод позволяет вручную загружать сценарий utils.js по требованию, чтобы включить форматирование/проверку и т. д. Дополнительные сведения см. в разделе Загрузка сценария служебных программ. Этот метод следует вызывать только один раз на странице. Возвращается объект Promise, поэтому вы можете использовать loadUtils().then(callback) чтобы узнать, когда он завершится. {
// 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 */ } }
});"> // 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()
} ) ;
Это срабатывает, когда пользователь открывает раскрывающийся список.
Это срабатывает, когда пользователь закрывает раскрывающийся список. Темы / Темный режим
@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]" );
}
}
@media ( prefers-color-scheme : dark) {
body , input {
color : white;
background-color : # 0d1117 ;
}
input {
border-color : # 5b5b5b ;
}
input :: placeholder {
color : # 8d96a0 ;
}
}
Переводы
i18n . Посмотрите их в действии. Скрипт утилит
getNumber и setNumberisValidNumber , getNumberType и getValidationErrorplaceholderNumberTypegetNumber даже при использовании опции nationalMode . Загрузка сценария утилит
Если вас не беспокоит размер файла (например, вы ленитесь загружать этот скрипт), проще всего просто использовать полный пакет ( /build/js/intlTelInputWithUtils.js ), который поставляется вместе со скриптом utils. Этот скрипт можно использовать точно так же, как основной intlTelInput.js, поэтому его можно либо загрузить непосредственно на страницу (которая определяет window.intlTelInput как обычно), либо его можно импортировать следующим образом: import intlTelInput from "intl-tel-input/intlTelInputWithUtils" .
Если вас беспокоит размер файла, вы можете отложенно загружать скрипт utils при инициализации плагина, используя параметр инициализации loadUtilsOnInit . Вам нужно будет разместить файл utils.js, а затем установить параметр loadUtilsOnInit для этого URL-адреса или просто указать его на версию, размещенную в CDN, например "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js" .loadUtilsOnInit для функции, которая возвращает обещание для сценария utils в виде объекта модуля JS. Если для создания приложения вы используете такой сборщик, как Webpack, Vite или Parcel, вы можете использовать его следующим образом: автоматически отделить утилиты в другой пакет: intlTelInput ( htmlInputElement , {
loadUtilsOnInit : ( ) => import ( "intl-tel-input/utils)
});
loadUtils вместо использования loadUtilsOnInit . Поиск неисправностей
Если вы хотите, чтобы ваш ввод был полной ширины, вам нужно установить такой же контейнер, т.е. . iti { width : 100 % ; }
Если у вас есть контейнер прокрутки, отличный от window , который вызывает проблемы из-за того, что раскрывающийся список не закрывается при прокрутке, просто прослушайте событие прокрутки на этом элементе и вызовите событие прокрутки в window , которое, в свою очередь, закроет раскрывающийся список, например scrollingElement . addEventListener ( "scroll" , function ( ) {
const e = document . createEvent ( 'Event' ) ;
e . initEvent ( "scroll" , true , true ) ;
window . dispatchEvent ( e ) ;
} ) ;
Для выравнивания CSS по умолчанию устанавливает вертикальное поле ввода равным 0px . Если вам нужен вертикальный запас, вам следует добавить его в контейнер (с классом iti ).
Если ваш код обработки ошибок вставляет сообщение об ошибке перед , это нарушит макет. Вместо этого вы должны вставить его перед контейнером (с классом iti ).
Раскрывающийся список должен автоматически появиться над/ниже ввода в зависимости от доступного места. Чтобы это работало правильно, вам необходимо инициализировать плагин только после добавления в DOM.
Чтобы получить автоматические заполнители для конкретной страны, просто опустите атрибут заполнителя в или установите для autoPlaceholder значение "aggressive" , чтобы переопределить любой существующий заполнитель.
Требуется несколько исправлений CSS, чтобы плагин хорошо работал с группами ввода Bootstrap. Вы можете увидеть Codepen здесь.
Примечание. В настоящее время в Mobile Safari существует ошибка, которая приводит к сбою при нажатии стрелки раскрывающегося списка (треугольник CSS) внутри группы ввода. Самый простой обходной путь — удалить треугольник CSS с помощью этой строки: . iti__arrow { border : none; }
Содействие
Атрибуции
Расширять
