Домой / HELP / Международный телефонный ввод с флагами стран и наборами кодов jQuery

Международный телефонный ввод с флагами стран и наборами кодов jQuery

Поле ввода номера телефона является обязательным полем в веб-форме, где необходимо собирать информацию о контакте пользователя. Отображение флага страны и международного кода набора номера делает телефонный номер удобным для пользователя. В этом уроке мы покажем вам, как реализовать международное поле ввода для телефона с национальными флажками и выпадающим списком кодов вызовов.

Поле ввода международного телефонного номера представляет собой простой плагин jQuery для добавления раскрывающегося списка в поле ввода. Он будет перечислять все названия стран, национальные флаги и международные коды набора в поле ввода телефона. Этот плагин очень полезен, когда вам необходимо предоставить телефонный вход для международных пользователей.

CSS
Добавьте intlTelInput.cssфайл таблицы стилей в список выпадающего списка международных телефонных подключений.

HTML
Следующий HTML-код создает поле ввода телефона.

JavaScript
В плагине «Международный телефонный вход» используется jQuery, поэтому включите библиотеку jQuery.

Включите intlTelInput.js плагина International Telephone Input.

Этот intlTelInput() метод инициализирует плагин International Telephone Input. Он выведет выпадающий список с флагом страны и набирает код для элемента ввода.

Основное использование
Следующий примерный код позволяет вводить международные телефонные поля. Укажите utils.js сценарий в utilsScript, чтобы включить международное форматирование.

Расширенное использование
Следующий примерный код устанавливает телефонный код страны по умолчанию на основе IP-адреса пользователя.

Параметры конфигурации

intlTelInput() Метод имеет различные варианты конфигурации для настройки международной телефонной функциональности ввода. Ниже приведены некоторые полезные параметры intlTelInput.

  • allowDropdown — (Boolean) (По умолчанию: true) Независимо от того, включено выпадающее меню или нет. Если отключено, выпадающий список не появится в элементе ввода, и флаг не будет доступен для клика.
  • autoHideDialCode — (Boolean) (По умолчанию: true) Удалите код набора из поля ввода при размытии или отправке.
  • autoPlaceholder — (String) (По умолчанию: вежливый) Установите заполнитель в поле ввода.
  • customPlaceholder — (Функция) (по умолчанию: null) Измените авто заполнитель с помощью настраиваемой строки.
  • dropdownContainer — (String) (По умолчанию: ») Добавить всплывающее окно страны к определенному элементу.
  • excludeCountries — (Array) (по умолчанию: undefined) Отображать все страны, кроме указанных.
  • formatOnDisplay — (Boolean) (По умолчанию: true) Отформатируйте входное значение во время инициализации.
  • geoIpLookup — (Функция) (по умолчанию: null) Укажите пользовательскую функцию, которая ищет местоположение пользователя.
  • hiddenInput — (String) (По умолчанию: ») Добавить скрытый ввод с заданным именем и отправить его, заполнив его результатом getNumber.
  • initialCountry — (String) (По умолчанию: ») Укажите код страны, чтобы установить начальный выбор страны. Установите для него «авто», чтобы получить местоположение пользователя по IP-адресу, используя опцию geoIpLookup.
  • nationalMode — (Boolean) (По умолчанию: true) Разрешить пользователю вводить номер без международных номеров.
  • placeholderNumberType — (String) (по умолчанию: MOBILE) Укажите тип номера, который будет использоваться для заполнителей.
  • onlyCountries — (Array) (По умолчанию: undefined) Отображать только указанные страны.
  • preferredCountries — (Array) (По умолчанию: [«us», «gb»]) Укажите страны, которые будут отображаться в верхней части списка.
  • separateDialCode — (Boolean) (По умолчанию: false) Отображает код набора номера страны рядом с выбранным флажком.
  • utilsScript — (String) (по умолчанию: ») Укажите путь к скрипту libphonenumber, чтобы включить проверку / форматирование.

Download Source Code

Про Александр

Здравствуйте, меня зовут Александр Мороз. Профессионально занимаюсь созданием сайтов . Выражаюсь на диалектах PHP, SQL, JavaScript, HTML, CSS, XML, jQuery. Иногда и матом в особо сложных случаях :)

Проверьте также

Как с помощью CSS прижать footer к низу окна браузера

Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач …

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *