International Telephone Input является плагином jquery для ввода и проверки международных телефонных номеров. Он добавляет выпадающее меню в котором перечислены все страны с их международными телефонными кодами и флагами.
Возможности International Telephone Input
- Автоматически форматирует введенный телефонный номер
- Автоматически устанавливает в атрибут placeholder тега input пример телефонного номера для выбранной страны
- Перемещение по странам в выпадающем списке помощью кнопок вверх/вниз или с помощью клавиш с алфавитом
- Выбор новой страны из списка приведет к обновлению международного телефонного кода в
input
- Ввод другого телефонного кода автоматически обновляет отображаемый флаг
- Выпадающее меню позиционируется в зависимости от наличия свободного места сверху\снизу
- Множество собственных настроек и открытых методов для взаимодействия
Подключите intlTelInput.css
между тегами head вашей страницы.
<link rel="stylesheet" href="intlTelInput.css">
Создайте поле для ввода телефона.
<input type="tel" id="demo" placeholder="">
Подключите библиотеку jQuery и плагин jQuery International Telephone Input в конце страницы перед закрывающим тегом body.
<script src="jquery.min.js"></script>
<script src="build/js/intlTelInput.js"></script>
Инициализируйте плагин следующим образом:
$("#demo").intlTelInput();
Дефолтные настройки:
// набор цифр, после валидации число будет добавлено к номеру
allowExtensions: false,
// автоматически форматировать телефон в соответствии с выбранной страной
autoFormat: true,
// показывать или нет пример записи телефонного номера для выбранной страны
autoPlaceholder: true,
// если в окне набора номера вписан код страны, то удалить его и переписать заново
autoHideDialCode: true,
// страна по умолчанию
defaultCountry: "",
// Маркер для ipinfo
// рекомендуется для https, или поддержки более 1000 просмотров страницы в день
ipinfoToken: "",
// не вставляйть в поле ввода международные телефонные коды
nationalMode: true,
// тип номера для плейсхолдера
numberType: "MOBILE",
// показывать только указанные в массиве страны
onlyCountries: [],
// страны в верхней части списка.
// по умолчанию это США и Великобритания
preferredCountries: [ "us", "gb" ],
// указать путь к скрипту libphonenumber для валидации/форматирования
utilsScript: ""
// отключение плагина
$("#demo").intlTelInput("destroy");
// Получить код страны
var extension = $("#demo").intlTelInput("getExtension");
// Получить текущий номер в данном формате
var intlNumber = $("#demo").intlTelInput("getNumber");
// Получить тип (фиксированный/мобильный/бесплатный и т.д.) текущего номера.
var numberType = $("#demo").intlTelInput("getNumberType");
// Получить данные по стране для выбранного флага.
var countryData = $("#demo").intlTelInput("getSelectedCountryData");
// Получить более подробную информацию об ошибке валидации.
var error = $("#demo").intlTelInput("get<a href="http://www.jqueryscript.net/tags.php?/Validation/">Validation</a>Error");
// Проверка текущего номера на валидность
var isValid = $("#demo").intlTelInput("isValidNumber");
// Загрузить скрипт utils.js (находится в каталоге lib) для всключения форматирования\валидации и др.
$("#demo").intlTelInput("loadUtils", "lib/libphonenumber/build/utils.js");
// Изменить выбранную страну
$("#demo").intlTelInput("selectCountry", "gb");
// Вставить номер и, соответственно, обновить выбранный флаг.
$("#demo").intlTelInput("setNumber", "+44 7733 123 456");
Примеры с International Telephone Input