Làm cách nào để sử dụng mã quốc gia trong HTML?
|
HTML Chọn danh sách mã điện thoại quốc gia có cờ Đăng dưới. HTML5, Select, Snippets vào ngày 14 tháng 11 năm 2021 Show
This is a code snippet for HTML Select country code list with flags. It is based on powerful twilio's API. It is plug and play, everything is hosted on CDN. Its usage is simple, simply add this in the of your web page "head" tag.Now add this tag where you wish it to be displayed and finally initialize it by this script. var input = document.querySelector("#phone");
window.intlTelInput(input, {
separateDialCode: true
});
It should be rendered like this: Now, there is a number of options that can be used to initialize the select dropdown.var input = document.querySelector("#phone");
window.intlTelInput(input, {
// show dial codes too
separateDialCode: true,
// If there are some countries you want to show on the top.
// here we are promoting russia and singapore.
preferredCountries: ["ru", "sg"],
//Default country
initialCountry:"sg",
// show only these countres, remove all other
onlyCountries: ["ru", "cn","pk", "sg", "my", "bd"],
// If there are some countries you want to execlde.
// here we are exluding india and israel.
excludeCountries: ["in","il"]
});
Hoàn thành mã
Số điện thoại được chuẩn hóa theo định dạng quốc tế được gọi là E. 164 kết hợp mã quốc gia và số thuê bao ở định dạng như thế này. +14155552671. Định dạng này được yêu cầu bởi nhiều API (bao gồm cả của Twilio) và có nghĩa là bạn không phải lưu trữ mã quốc gia và số điện thoại trong hai cột cơ sở dữ liệu riêng biệt Tuy nhiên, bạn có thể không muốn người dùng của mình phải nhập dấu + và mã quốc gia khi họ cung cấp số điện thoại của mình cho
Bài đăng trên blog này sẽ hướng dẫn cách xây dựng trường nhập số điện thoại để xử lý và phân tích số điện thoại bằng cách sử dụng HTML, JavaScript cơ bản và plugin Bạn có thể tìm thấy mã đã hoàn thành trên GitHub của tôi Plugin intl-tel-input có thể làm gì?Dự án này sử dụng nhiều intl-tel-input, một "plugin JavaScript để nhập và xác thực các số điện thoại quốc tế". Tôi sẽ đề cập đến cách thiết lập plugin thông thường của mình, nhưng nó có rất nhiều tùy chọn cấu hình bổ sung mà bạn có thể khám phá trong phần Plugin cung cấp mã quốc gia thả xuống với các cờ đẹp để đại diện cho các quốc gia khác nhau. Nó cũng xử lý số người đăng ký hoặc số "định dạng quốc gia" để chuẩn hóa đầu vào của người dùng có thể bao gồm dấu cách, dấu ngoặc đơn, dấu gạch ngang, v.v. Nhúng plugin intl-tel-input vào mã của bạnChúng tôi sẽ giữ mọi thứ khá đơn giản ở đây và bắt đầu với một số HTML và JavaScript cơ bản. Tạo một tệp mới có tên là Điều này kéo các phiên bản CDN của CSS và JS của plugin, giúp chúng tôi hiển thị mã quốc gia thả xuống và xử lý các số điện thoại. Tôi đang sử dụng v17. 0. 8, nhưng bạn có thể tìm thấy phiên bản mới nhất bằng cách kiểm tra các thẻ. Bạn cũng có thể tự cài đặt plugin bằng hoặc và lưu trữ mã nguồn Để có phong cách đẹp hơn, hãy tạo một tệp mới trong cùng thư mục có tên là Tiếp theo, thêm biểu mẫu sẽ bao gồm đầu vào số điện thoại. Bên trong các thẻ index.html, hãy thêm mã HTML sauNếu bạn tải tệp này vào trình duyệt tại thời điểm này, bạn sẽ thấy trường biểu mẫu nhưng chưa có định dạng, chúng tôi vẫn cần khởi tạo plugin Khởi tạo plugin intl-tel-inputThêm thẻ script bên dưới nội dung nhưng bên trong HTML và thêm mã khởi tạo sau |