Mã điện thoại quốc gia HTML

Số điện thoại là một trong những dữ liệu quan trọng có thể được sử dụng làm điều kiện để đăng ký trên trang web. Số điện thoại của mỗi quốc gia đều có mã riêng để phân biệt số điện thoại này xuất xứ từ quốc gia nào. Điều này sẽ giúp việc theo dõi và liên hệ với chủ nhân của số dễ dàng hơn

Sometimes it happens that someone forgets their country code when registering on a site. To overcome this, in making the element a country code dropdown list is needed as shown below,

Kích thước tập tin. 738 KBViews Total. 452899Cập nhật lần cuối. 14/09/2022 13. 26. 00 UTC Ngày Xuất bản. 13/10/2013 09. 25. 57 UTCTrang web chính thức. Tới trang webGiấy phép. MIT

Tải xuống bản trình diễn

Thêm trong danh mục này

Xem các plugin được đề xuất

TOP 100 Plugin jQuery 2022

Chrome, IE9+, FireFox, Opera, Safari#input#telephone

Đầu vào điện thoại quốc tế là một plugin JavaScript jQuery hữu ích để biến đầu vào tiêu chuẩn thành Đầu vào điện thoại quốc tế với danh sách thả xuống cờ quốc gia

Khi nhấp vào danh sách thả xuống, nó sẽ liệt kê tất cả các quốc gia và mã quay số quốc tế của họ bên cạnh cờ của họ. Lý tưởng cho khách truy cập quốc tế của trang web của bạn

Xem thêm

• 7 plugin jQuery tốt nhất cho số điện thoại

sử dụng cơ bản

1. Bao gồm yêu cầu intlTelInput. css trong phần đầu trang của bạn

2. Tạo một trường nhập điện thoại tiêu chuẩn

3. Bao gồm plugin Đầu vào điện thoại quốc tế ở cuối trang của bạn

4. Khởi tạo plugin và chúng ta đã hoàn tất

// Vanilla Javascript
var input = document.querySelector("#telephone");
window.intlTelInput(input,({
  // options here
}));

// jQuery 
$("#telephone").intlTelInput({
  // options here
});

5. Tất cả các tùy chọn mặc định để tùy chỉnh plugin

// whether or not to allow the dropdown
allowDropdown: true,

// if there is just a dial code in the input: remove it on blur, and re-add it on focus
autoHideDialCode: true,

// add a placeholder in the input with an example number for the selected country
autoPlaceholder: "polite",

// modify the auto placeholder
customPlaceholder: null,

// append menu to specified element
dropdownContainer: null,

// don't display these countries
excludeCountries: [],

// format the input value during initialisation and on setNumber
formatOnDisplay: true,

// geoIp lookup function
geoIpLookup: null,

// inject a hidden input with this name, and on submit, populate it with the result of getNumber
hiddenInput: "",

// initial country
initialCountry: "",

// localized country names e.g. { 'de': 'Deutschland' }
localizedCountries: null,

// don't insert international dial codes
nationalMode: true,

// display only these countries
onlyCountries: [],

// number type to use for placeholders
placeholderNumberType: "MOBILE",

// the countries at the top of the list. defaults to united states and united kingdom
preferredCountries: [ "us", "gb" ],

// display the country dial code next to the selected flag so it's not part of the typed number
separateDialCode: false,

// specify the path to the libphonenumber script to enable validation/formatting
utilsScript: ""

6. phương pháp API

// destroy
instance.destroy();

// Get the extension part of the current number
var extension = instance.getExtension();

// Get the current number in the given format
var intlNumber = instance.getNumber();

// Get the type (fixed-line/mobile/toll-free etc) of the current number. 
var numberType = instance.getNumberType();

// Get the country data for the currently selected flag.
var countryData = instance.getSelectedCountryData();

// Get more information about a validation error. 
var error = instance.getValidationError();

// Validate the current number
var isValid = instance.isValidNumber();

// Change the country selection
instance.selectCountry("gb");

// Insert a number, and update the selected flag accordingly.
instance.setNumber("+44 7733 123 456");

// Change the placeholderNumberType option.
instance..setPlaceholderNumberType("FIXED_LINE");

// Load the utils.js script (included in the lib directory) to enable formatting/validation etc.
window.intlTelInputGlobals.loadUtils("build/js/utils.js");

// Get all the country data
var countryData = window.intlTelInputGlobals.getCountryData();

7. xử lý sự kiện

input.addEventListener("countrychange", function() {
  // do something with iti.getSelectedCountryData()
});

input.addEventListener("open:countrydropdown", function() {
  // triggered when the user opens the dropdown
});

input.addEventListener("close:countrydropdown", function() {
  // triggered when the user closes the dropdown
});

Nhật ký thay đổi

v17. 0. 19 (2022-09-14)

• Đang cập nhật libphonenumber lên phiên bản v8. 12. 54

v17. 0. 18 (2022-07-16)

• Cập nhật

v17. 0. 17 (2022-05-31)

• Cập nhật

v17. 0. 16 (2022-03-15)

• Cập nhật

v17. 0. 15 (2021-11-30)

• Cập nhật

v17. 0. 13 (2021-05-30)

• Cập nhật

v17. 0. 12 (2021-02-14)

• Cập nhật

v17. 0. 11 (2021-02-08)

• Cập nhật

v17. 0. 10 (2021-02-07)

• Cập nhật

v17. 0. 8 (2020-10-21)

• Cập nhật

v17. 0. 6 (2020-10-08)

• Cập nhật

v17. 0. 5 (2020-09-21)

• Cập nhật

v17. 0. 2 (2020-05-25)

• Cập nhật

v17. 0. 0 (2020-04-19)

• Cập nhật xác thựcError enum trong utils. js để khớp với phiên bản libphonenumber mới nhất
• Thay đổi thuộc tính ID thành duy nhất (cả trong danh sách thả xuống e. g. lừa đảo các quốc gia trong phần ưa thích VÀ trên nhiều phiên bản của plugin)

v16. 1. 0 (2020-04-11)

• Cập nhật

v16. 0. 15 (2020-04-05)

• Cập nhật

v16. 0. 14 (2020-04-03)

• Cập nhật

v16. 0. 11 (2020-02-13)

• Cập nhật

v16. 0. 10 (2020-02-10)

• Cập nhật

v16. 0. 8 (29-11-2019)

• Cập nhật

v16. 0. 7 (25-10-2019)

• Cập nhật

v16. 0. 6 (21-10-2019)

• Thêm điều hướng bằng mũi tên hỗ trợ cho IE

v16. 0. 5 (10-10-2019)

• Cập nhật

v16. 0. 4 (23-09-2019)

• Cập nhật

v16. 0. 3 (2019-09-01)

• Cập nhật

v16. 0. 2 (2019-07-08)

• Đã khắc phục sự cố với chức năng `remove` không hợp lệ trong IE11

v16. 0. 1 (2019-07-04)

• cập nhật

v16. 0. 0 (2019-06-24)

• Đã chuyển đổi tên lớp CSS để sử dụng BEM, vì vậy bạn sẽ không gặp phải bất kỳ xung đột nào nữa với các tên lớp chung chung như "highlight"
• Tất cả các quốc gia NANP hiện chỉ có +1 làm Mã quay số của họ, trong khi một số quốc gia được sử dụng để bao gồm mã vùng e. g. Barbados từng có mã quay số +1246 và hiện chỉ có +1

v15. 1. 2 (2019-06-17)

• Sửa chữa. getNumber đôi khi chỉ trả về mã quay số

v15. 1. 0 (2019-05-23)

• khả năng tiếp cận. tiêu điểm đánh dấu mục danh sách

v15. 0. 1 (2019-03-04)

• Cập nhật

v15. 0. 0 (2019-02-11)

• Thay đổi hành vi của tùy chọn autoHideDialCode

v14. 1. 0 (2019-02-10)

• đã thêm phương thức tĩnh getInstance

v14. 0. 10 (2019-02-06)

• Cập nhật

v14. 0. 9 (2019-02-05)

• Cập nhật

v14. 0. 8 (2019-01-28)

• Cập nhật

v14. 0. 7 (2019-01-07)

• Cập nhật

v14. 0. 6 (21-11-2018)

• Cập nhật

v14. 0. 5 (2018-11-08)

• Cập nhật

v14. 0. 4 (2018-11-02)

• Cập nhật

v14. 0. 3 (2018-10-07)

• Cập nhật

v14. 0. 2 (26-09-2018)

• Cập nhật

v13. 0. 4 (2018-09-14)

• Cập nhật

v13. 0. 3 (2018-08-25)

• Cập nhật

v12. 4. 0 (2018-06-24)

• Cập nhật

v12. 3. 0 (2018-06-11)

• Cập nhật

v10. 0. 1 (15-12-2016)

• đổi tên tùy chọn numberType thành placeholderNumberType
• đổi tên formatOnInit thành formatOnDisplay

v9. 2. 7 (2016-12-08)

• các tùy chọn allowDropdown và splitDialCode riêng biệt
• làm cho đối tượng mặc định có thể truy cập được từ bên ngoài
• Sửa lỗi

v9. 2. 6 (2016-12-03)

• cập nhật

v9. 2. 5 (2016-12-01)

• sửa lỗi. các phương pháp libphonenumber mong muốn các số NANP bao gồm mã vùng

v9. 2. 4 (2016-11-01)

• các tùy chọn allowDropdown và splitDialCode riêng biệt

v9. 2. 3 (10-12-2016)

• các tùy chọn allowDropdown và splitDialCode riêng biệt
• làm cho đối tượng mặc định có thể truy cập được từ bên ngoài
• Sửa lỗi

Plugin jQuery tuyệt vời này được phát triển bởi jackocnr. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức

Làm cách nào để lấy mã quốc gia trong số điện thoại trong HTML?

Làm cách nào để sử dụng mã quốc gia trong HTML?

Làm cách nào để định dạng số điện thoại trong HTML?

Làm cách nào để thêm mã quốc gia vào trường nhập liệu HTML?