Автоматическое добавление кода страны в поле ввода с помощью JavaScript, вот 3 шага для создания и добавления автоматического кода страны,

  • Включите основные CDN.
  • Создайте поле ввода HTML.
  • Включите intlTelInput JS, чтобы установить код страны.
  • Создайте скрипт для установки кода на выбранную страну.

Мы используем подключаемый модуль JavaScript International Telephone Input, чтобы получить весь код страны с флагом страны.

Узнайте больше: https://github.com/jackocnr/intl-tel-input

Оглавление

Включить основные 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/

Это полное решение для добавления кода страны в любое поле ввода.

Удачного кодирования..!