Автоматическое добавление кода страны в поле ввода с помощью JavaScript, вот 3 шага для создания и добавления автоматического кода страны,
- Включите основные CDN.
- Создайте поле ввода HTML.
- Включите
intlTelInput
JS, чтобы установить код страны. - Создайте скрипт для установки кода на выбранную страну.
Мы используем подключаемый модуль JavaScript International Telephone Input, чтобы получить весь код страны с флагом страны.
Узнайте больше: https://github.com/jackocnr/intl-tel-input
Оглавление
- Включить основные CDN
- Создать поле ввода HTML
- Включить intlTelInput JS для установки кода страны
- Полный исходный код для добавления кода страны в поле ввода
- Подпишитесь на последние обновления
Включить основные CDN
‹ссылка rel="stylesheet" href="build/css/intlTelInput.css"›
‹script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js›‹/script›
‹script src="build/js/intlTelInput.js"›‹/script›
Я предоставляю все файлы, и вы загружаете полный код в конце этого руководства.
Создайте поле ввода HTML
Мы используем атрибут ID поля телефона для установки кода страны.
‹input id="phone" name="phone" type="tel"›
‹button type="отправить"›Отправить‹/кнопка›
Включите intlTelInput
JS для установки кода страны
‹скрипт›
// Ванильный Javascript
var input = document.querySelector("#phone");
window.intlTelInput (ввод, ({
// варианты здесь
}));
‹скрипт›
Выше приведен основной код для получения стран из плагина JavaScript.
Вот код для установки кода страны в том же поле телефона при изменении страны.
‹скрипт›
$(документ).готовый(функция() {
$(‘.iti__flag-container’).click(function() {
var countryCode = $(‘.iti__selected-flag’).attr(‘title’);
var countryCode = countryCode.replace(/[⁰-9]/g,’’)
$('#телефон').val("");
$('#phone').val("+"+countryCode+" "+ $('#phone').val());
});
});
‹/скрипт›
Объяснение. В этом конкретном фрагменте кода мы берем код страны из заголовка, используя функцию замены JavaScript.
Вот полный исходный код для автоматического добавления кода страны во ввод с использованием JavaScript,
Полный исходный код для добавления кода страны в поле ввода
‹!DOCTYPE html›
‹html›
‹метакодировка="utf-8›
‹title›Номер телефона с кодом страны с использованием JS‹/title›
‹ссылка rel="stylesheet" href="build/css/intlTelInput.css"›
‹script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js›‹/script›
‹h1›Номер телефона с кодом страны‹/h1›
‹input id="phone" name="phone" type="tel"›
‹button type="отправить"›Отправить‹/кнопка›
‹script src="build/js/intlTelInput.js"›‹/script›
‹скрипт›
// Ванильный Javascript
var input = document.querySelector("#phone");
window.intlTelInput (ввод, ({
// варианты здесь
}));
$(документ).готовый(функция() {
$(‘.iti__flag-container’).click(function() {
var countryCode = $(‘.iti__selected-flag’).attr(‘title’);
var countryCode = countryCode.replace(/[⁰-9]/g,’’)
$('#телефон').val("");
$('#phone').val("+"+countryCode+" "+ $('#phone').val());
});
});
‹/скрипт›
‹/html›
Нажмите здесь, чтобы проверить демо,
Демонстрация автоматического добавления кода страны
Вот полные файлы, которые вы можете скачать по данной ссылке,
https://phpcoder.tech/auto-add-country-code-in-input-field-using-javascript/
Это полное решение для добавления кода страны в любое поле ввода.
Удачного кодирования..!