Giới Thiệu

Trong bài viết này, chúng ta sẽ khám phá cách tùy chỉnh trường nhập số điện thoại quốc tế trong một biểu mẫu Bootstrap bằng cách sử dụng plugin intl-tel-input. Việc này không chỉ giúp cải thiện giao diện người dùng mà còn nâng cao trải nghiệm người dùng. Chúng ta sẽ cùng nhau tìm hiểu các vấn đề thường gặp và cách khắc phục chúng.

Cài Đặt Plugin intl-tel-input

Đầu tiên, để sử dụng plugin này, bạn cần thêm nó vào dự án của mình. Bạn có thể thêm nó qua CDN như sau:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

Sau đó, bạn có thể tạo một trường nhập số điện thoại như sau:

<input id="Form_Phone" type="tel">

Tiếp theo, sử dụng đoạn mã sau để khởi tạo plugin:

document.addEventListener("DOMContentLoaded", function () {
    const input = document.querySelector("#Form_Phone");
    const iti = window.intlTelInput(input, {
        initialCountry: "pk",
        preferredCountries: ["pk", "sa", "tr", "ae", "bd"],
        separateDialCode: false,
        nationalMode: false,
        autoHideDialCode: false,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
    });
});

Vấn Đề Gặp Phải

Khi áp dụng plugin này, bạn có thể gặp phải một số vấn đề về giao diện như:

• Trường nhập số điện thoại bị lệch: Mặc dù bạn đã sử dụng cùng một CSS cho tất cả các trường khác trong biểu mẫu.
• Mã vùng bị rải rác: Các mã vùng không hiển thị đúng vị trí, gây khó khăn cho người dùng khi nhập số điện thoại.

Để giải quyết vấn đề này, tôi đã thử nghiệm với một số lớp Bootstrap như d-flex, d-block w-100, nhưng không có tác dụng.

Khắc Phục Mã Vùng Rải Rác

Tôi đã sử dụng đoạn mã sau để ẩn mã vùng:

const countryItems = document.querySelectorAll(".iti__country-list .iti__country");
countryItems.forEach(item => {
    const dialCode = item.querySelector(".iti__dial-code");
    if (dialCode) {
        dialCode.style.display = "none"; // Ẩn mã vùng
    }
});

Mặc dù tôi đã giải quyết được vấn đề mã vùng, nhưng vấn đề về độ rộng vẫn tồn tại. Tôi đã thử nhiều kiểu CSS khác nhau nhưng không thành công.

Phát Hiện Quan Trọng

Sau một thời gian chẩn đoán, tôi nhận ra rằng danh sách thả xuống cũng cần hiển thị tên quốc gia, và màu sắc chữ quá sáng khiến chúng gần như vô hình. Điều này là nguyên nhân khiến mã vùng bị rải rác, vì chúng không đồng đều do sự khác biệt về độ dài tên quốc gia.

Giải Pháp Một Dòng

Cuối cùng, sau khi tìm hiểu kỹ, tôi đã phát hiện ra lớp CSS chịu trách nhiệm cho vấn đề này:

.iti.iti--allow-dropdown {
    width: 100%;
    color: maroon;
}

Thay đổi nhỏ này đã giúp:

• Căn chỉnh độ rộng đầy đủ
• Khôi phục màu sắc chữ đọc được
• Khắc phục ảo giác về mã vùng bị rải rác

Tại Sao Điều Này Quan Trọng

Vấn đề này không chỉ đơn thuần là thẩm mỹ — nó ảnh hưởng đến trải nghiệm người dùng và khiến biểu mẫu có vẻ không hoàn thiện. Việc khắc phục không chỉ là về bố cục mà còn là về khả năng nhìn thấy. Bằng cách hiểu cách mà plugin chèn mã HTML và cách mà các kiểu kế thừa có thể gây ra vấn đề, tôi đã có thể giải quyết tận gốc vấn đề.

Thực Hành Tốt Nhất

• Kiểm tra giao diện trên nhiều thiết bị: Đảm bảo rằng trường nhập số điện thoại hoạt động tốt trên các kích thước màn hình khác nhau.
• Sử dụng màu sắc tương phản: Đảm bảo rằng các thành phần trong biểu mẫu có màu sắc dễ đọc và không bị nhòa.
• Thêm thông tin hướng dẫn: Cung cấp thông tin về cách nhập số điện thoại đúng cách cho người dùng.

Các Cạm Bẫy Thường Gặp

• Không kiểm tra các trình duyệt khác nhau: Một số vấn đề có thể xảy ra chỉ trên một số trình duyệt nhất định.
• Quá phụ thuộc vào CSS của bên thứ ba: Đôi khi các plugin có thể không tương thích tốt với CSS của bạn.

Mẹo Tối Ưu Hiệu Suất

• Sử dụng phiên bản nhẹ hơn của plugin: Nếu bạn không cần tất cả các tính năng, hãy tìm kiếm phiên bản nhẹ hơn.
• Tối ưu hóa mã JavaScript: Giảm thiểu kích thước mã JS của bạn để cải thiện hiệu suất tải trang.

Kết Luận

Việc tùy chỉnh trường nhập số điện thoại quốc tế trong Bootstrap có thể gặp phải nhiều thử thách, nhưng với sự kiên nhẫn và kiến thức đúng đắn, bạn có thể tạo ra một biểu mẫu thân thiện với người dùng. Hãy thử nghiệm và điều chỉnh cho đến khi bạn hài lòng với kết quả. Đừng ngần ngại chia sẻ kinh nghiệm của bạn trong phần bình luận bên dưới!

Câu Hỏi Thường Gặp (FAQ)

1. Plugin intl-tel-input có tương thích với các phiên bản Bootstrap mới không?
Có, plugin này hoạt động tốt với các phiên bản Bootstrap mới nhất.

2. Tôi có thể tùy chỉnh màu sắc của mã quốc gia không?
Có, bạn có thể tùy chỉnh màu sắc thông qua CSS.

3. Tôi có cần thêm JavaScript để sử dụng plugin không?
Có, bạn cần thêm mã JavaScript để khởi tạo plugin.

Hãy để lại câu hỏi của bạn nếu bạn cần thêm thông tin!