Автоматично добавяне на код на държава в полето за въвеждане чрез JavaScript, ето 3 стъпки за създаване и добавяне на автоматичен код на държава,

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

Ние използваме International Telephone Input JavaScript плъгин, за да получим целия код на държавата с флага на държавата.

Научете повече: https://github.com/jackocnr/intl-tel-input

Съдържание

Включете основни CDN

‹link 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=”submit”›Submit‹/button›

‹/форма›

Включете 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›

‹meta charset=”utf-8›

‹title›Телефонен номер с код на държавата чрез JS‹/title›

‹link 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=”submit”›Submit‹/button›

‹/форма›

‹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/

Това са пълно решение за добавяне на код на държава във всяко поле за въвеждане.

Честито кодиране..!