Định dạng trường nhập tự động với Cleave.js
Hãy suy nghĩ về tất cả các trường đầu vào khác nhau mà yêu cầu một cấu trúc định dạng. Số điện thoại, thẻ tín dụng, ngày sinh, địa chỉ đường phố Tất cả họ đều có mẫu độc đáo của riêng.
Thật dễ dàng để rời khỏi các lĩnh vực này một mình và tin tưởng người dùng. Nhưng nó có thể tốt hơn để sử dụng Cleave.js, một plugin JavaScript vanilla miễn phí để giúp bạn tự động định dạng các trường đầu vào.
HTML5 đi kèm với nó bộ đầu vào riêng liên quan đến các mẫu dữ liệu chẳng hạn như số điện thoại. Với Cleave, bạn có thể đưa nó lên cấp độ tiếp theo với đầu vào tùy chỉnh cái đó tự động định dạng văn bản như nó đã gõ.
Theo mặc định, plugin hỗ trợ năm mẫu văn bản cơ bản:
- Số thẻ tín dụng
- Số điện thoại
- ngày
- Kiểu số (có dấu phẩy)
- Các trường đầu vào tùy chỉnh
Lựa chọn cuối cùng đó là lựa chọn tuyệt vời nhất vì bạn có thể thực hiện mẫu dữ liệu tùy chỉnh từ đầu. Cleave không buộc bạn phải tuân theo bất kỳ phương pháp nghiêm ngặt nào.
Thay vào đó, nó cung cấp cho bạn các công cụ để xây dựng đầu vào của riêng bạn với hỗ trợ tùy chọn cho các thành phần React và Angular. Nó cũng hỗ trợ tất cả các trình duyệt chính và nên phù hợp với hỗ trợ cho trình duyệt cũ cùng với jQuery.
Lưu ý đây không phải là một plugin khó khăn để thiết lập. Bạn nhắm mục tiêu bất cứ ID hoặc lớp nào bạn có trên trường đầu vào của bạn và chuyển nó vào một thể hiện Cleave mới. Đây là một đoạn mẫu:
var cleave = new Cleave ('. input-phone', phone: true, phoneRegionCode: 'country'); Tuy nhiên, trong khi Cleave có thể dễ dàng thiết lập, nó có rất nhiều tính năng tùy chỉnh bạn có thể chơi với.
Tất cả các tài liệu là được lưu trữ bên trong repo, vì vậy bạn sẽ cần duyệt trang GitHub để tìm tất cả các phương pháp và lựa chọn khác nhau. Cụ thể là trang tùy chọn có rất nhiều thứ phải trải qua và có thể mất một thời gian để tìm thấy những gì bạn muốn.
Rất may, Cleave có nhiều ví dụ sống bạn có thể nghiên cứu và nhân rộng. Những ví dụ này cũng tải miễn phí từ repo GitHub. Nếu bạn muốn thấy nhiều ví dụ sống tham quan Trang chủ Cleave.js hoặc kiểm tra chuyện này kẹt với các bản demo.
