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

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

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

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

<link rel="stylesheet" href="css/intlTelInput.css">

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

<input type="tel" id="phone" />

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<script src="js/intlTelInput.js"></script>

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

$("#phone").intlTelInput();

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

<script>
$("#phone").intlTelInput({
    utilsScript: "js/utils.js"
});
</script>

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

<script>
$("#phone").intlTelInput({
    initialCountry: "auto",
    geoIpLookup: function(callback) {
        jQuery.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            callback(countryCode);
        });
    },
    utilsScript: "js/utils.js"
});
</script>

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

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