Input Mask: nó là gì, mặt nạ nhập liệu và định dạng

Mặt nạ nhập liệu là gì?

Input Mask (mặt nạ nhập liệu) là một cơ chế xác định mẫu cho dữ liệu nhập vào và tự động định dạng văn bản khi người dùng nhập. Người dùng chỉ nhập các ký tự quan trọng (chữ số, chữ cái) và hệ thống tự động thêm dấu phân cách: khoảng trắng, dấu gạch ngang, dấu ngoặc, dấu gạch chéo. Đây là điểm khác biệt chính so với xử lý sau, nơi dữ liệu được định dạng sau khi hoàn tất nhập.

Mặt nạ nhập liệu giải quyết ba vấn đề của trải nghiệm người dùng. Thứ nhất — tải nhận thức: người dùng không cần nhớ định dạng dữ liệu và tự đặt dấu phân cách. Thứ hai — tốc độ nhập: tự động chèn dấu phân cách và chuyển đến nhóm ký tự tiếp theo giúp tăng tốc độ gõ. Thứ ba — chất lượng dữ liệu: mặt nạ đảm bảo dữ liệu được thu thập ở định dạng thống nhất không có biến thể.

Không giống như các bộ định dạng NSFormatter hoạt động ở cấp hiển thị dữ liệu đã nhập, mặt nạ nhập liệu hoạt động ở cấp nhập liệu: nó kiểm soát từng ký tự được nhập và xác định xem ký tự đó có được phép ở vị trí hiện tại của mặt nạ hay không. Nếu ký tự không khớp với mặt nạ, nó sẽ bị từ chối hoặc bỏ qua.

Theo nghiên cứu UX của Apple (2024), mặt nạ nhập liệu hiệu quả nhất cho các trường người dùng nhập dữ liệu ở định dạng không quen thuộc. Ví dụ: SNILS (000-000-000 00) hoặc INN (000000000000) — người dùng có thể không biết số lượng chữ số chính xác hoặc vị trí của dấu phân cách và mặt nạ gợi ý trực quan định dạng chính xác.

Cú pháp mặt nạ nhập liệu

Cú pháp mặt nạ trong thư viện InputMask sử dụng kết hợp các ký tự giữ chỗ và ký tự hằng. Ký tự giữ chỗ xác định loại ký tự được phép ở mỗi vị trí: 0 hoặc 9 cho chữ số, A cho chữ cái, _ cho bất kỳ ký tự nào. Ký tự hằng là các dấu phân cách được chèn tự động: khoảng trắng, dấu gạch ngang, dấu ngoặc, dấu chấm, dấu gạch chéo.

Khối bắt buộc và tùy chọn

Dấu ngoặc vuông [0] biểu thị ký tự bắt buộc — người dùng phải nhập chữ số tại vị trí này. Dấu ngoặc nhọn {0} biểu thị ký tự tùy chọn — nếu người dùng bỏ qua khối, mặt nạ không chèn dấu phân cách tương ứng. Ví dụ: mặt nạ [00]{.}[00]{.}[0000] cho ngày tháng: nếu người dùng không nhập tháng, dấu phân cách sau ngày cũng không được hiển thị.

Tiếp tố của mặt nạ

Các ký tự hằng bên ngoài dấu ngoặc vuông và ngoặc nhọn là tiếp tố — chúng luôn được hiển thị, ngay cả khi trường trống. Ví dụ: trong mặt nạ +7 ([000]) [000]-[00]-[00], các ký tự +7, (, ), khoảng trắng và dấu gạch ngang là tiếp tố và người dùng không thể xóa. Tiếp tố giúp người dùng hiểu định dạng mong đợi ngay cả trước khi bắt đầu nhập.

Các loại mặt nạ theo mục đích

Mặt nạ nhập liệu được phân loại theo loại dữ liệu mà chúng được thiết kế. Mỗi loại có cấu trúc, số lượng nhóm và vị trí đặt dấu phân cách riêng. Việc chọn đúng mặt nạ rất quan trọng đối với trải nghiệm người dùng — nếu mặt nạ không khớp với mong đợi của người dùng, họ sẽ xóa các ký tự được chèn tự động.

Mặt nạ cho số điện thoại

Mặt nạ điện thoại là loại phổ biến nhất. Số Nga được định dạng là +7 ([000]) [000]-[00]-[00], số Mỹ là +1 ([000]) [000]-[0000]. Mặt nạ phải hỗ trợ số lượng chữ số khác nhau trong mã quốc gia và thành phố. Thư viện InputMask hỗ trợ mặt nạ ưu tiên: nếu mặt nạ đầu tiên không phù hợp (người dùng đã nhập mã quốc gia khác), mặt nạ thứ hai sẽ được áp dụng.

Mặt nạ cho thẻ ngân hàng

Cho số thẻ, mặt nạ [0000] [0000] [0000] [0000] được sử dụng với khoảng trắng giữa các nhóm 4 chữ số. Ngoài ra, mặt nạ cho ngày hết hạn [00]/[00] và mã CVV [000] có thể được áp dụng. Mặt nạ số thẻ hỗ trợ 16–19 chữ số tùy thuộc vào hệ thống thanh toán: Visa và Mastercard — 16 chữ số, American Express — 15, Maestro — 12–19.

Mặt nạ cho ngày tháng và mã

Mặt nạ ngày tháng sử dụng định dạng [00]{.}[00]{.}[0000] với dấu chấm hoặc dấu gạch chéo làm dấu phân cách. Cho INN, SNILS và các định danh khác, mặt nạ chuyên dụng được sử dụng: INN — [000000000000] (12 chữ số), SNILS — [000]-[000]-[000] [00] (11 chữ số với dấu gạch ngang). Cho mã xác thực — [0000] hoặc [000000] tùy theo độ dài.

Triển khai mặt nạ trong Swift

Triển khai mặt nạ trong Swift được thực hiện bằng cách đặt delegate UITextFieldDelegate với thư viện InputMask. Thư viện cung cấp lớp MaskedTextFieldDelegate, kết nối với trường văn bản và tự động định dạng đầu vào theo mặt nạ đã chỉ định.

import InputMask

class PaymentViewController: UIViewController {

    @IBOutlet var cardField: UITextField!
    @IBOutlet var dateField: UITextField!
    @IBOutlet var cvvField: UITextField!

    var cardListener: MaskedTextFieldDelegate!

    override func viewDidLoad() {
        super.viewDidLoad()
        cardListener = MaskedTextFieldDelegate()
        cardListener.primaryMaskFormat = "[0000] [0000] [0000] [0000]"
        cardField.delegate = cardListener
        dateField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[00]/[00]"
        )
        cvvField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[000]"
        )
    }
}

Cho số điện thoại với tính năng tự động phát hiện quốc gia, hãy sử dụng mặt nạ ưu tiên. MaskedTextFieldDelegate hỗ trợ một mảng các mặt nạ: mặt nạ phù hợp đầu tiên được áp dụng. Nếu người dùng nhập mã +1, định dạng Mỹ được áp dụng; nếu +7, định dạng Nga.

let phoneListener = MaskedTextFieldDelegate()
phoneListener.primaryMaskFormat = "+7 ([000]) [000]-[00]-[00]"
phoneListener.affinityMask = [
    "+1 ([000]) [000]-[0000]",
    "+44 [000] [000] [0000]",
    "+49 [000] [0000] [0000]"
]

Cho ngày tháng với khối tùy chọn, hãy sử dụng dấu ngoặc nhọn. Nếu người dùng chỉ nhập ngày, mặt nạ hiển thị “21”. Nếu nhập ngày và tháng — “21.07”. Nếu nhập cả ba thành phần — “21.07.2026”. Các khối tùy chọn làm cho mặt nạ thích ứng và không buộc người dùng nhập dữ liệu họ không muốn cung cấp.

let dateListener = MaskedTextFieldDelegate(
    primaryMaskFormat: "[00]{.}[00]{.}[0000]"
)
dateField.delegate = dateListener

Xử lý dán và xóa

Xử lý dán đúng cách là một trong những khía cạnh phức tạp nhất của việc triển khai mặt nạ nhập liệu. Khi dán văn bản (ví dụ: số thẻ từ clipboard), thư viện phải loại bỏ tất cả dấu phân cách khỏi văn bản được dán, chỉ trích xuất các ký tự quan trọng và áp dụng mặt nạ cho dữ liệu sạch. InputMask của RedMadRobot thực hiện điều này tự động thông qua phương thức shouldChangeCharactersIn.

Khi dán văn bản đã định dạng (có khoảng trắng hoặc dấu gạch ngang), thư viện trước tiên chuẩn hóa dữ liệu: loại bỏ tất cả ký tự không khớp với mẫu mặt nạ, sau đó áp dụng mặt nạ cho chuỗi đã chuẩn hóa. Nếu văn bản được dán chứa ký tự không hợp lệ (chữ cái trong mặt nạ số), chúng sẽ bị bỏ qua.

Xử lý xóa (phím lùi) trong mặt nạ đòi hỏi sự chú ý đặc biệt. Khi nhấn phím lùi, mặt nạ phải xóa ký tự quan trọng cuối cùng, không phải dấu phân cách hằng. Nếu con trỏ ở sau một ký tự hằng, phím lùi phải bỏ qua nó và xóa ký tự quan trọng trước đó. InputMask triển khai hành vi này thông qua một ngăn xếp các ký tự đã nhập.

Cho chọn và thay thế văn bản, mặt nạ phải xử lý chính xác các tình huống người dùng chọn một phần văn bản và thay thế bằng nội dung mới. Thư viện InputMask hỗ trợ điều này thông qua phương thức modifyString trong MaskedTextFieldDelegate, chấp nhận phạm vi thay thế và chuỗi mới.

Các phương pháp hay nhất để thiết kế mặt nạ

Thiết kế mặt nạ bắt đầu bằng việc phân tích cách người dùng sẽ nhập dữ liệu. Nếu hầu hết người dùng biết định dạng thuộc lòng (số điện thoại), mặt nạ nên tối thiểu — chỉ dấu phân cách giữa các nhóm. Nếu định dạng không quen thuộc (SNILS, INN), mặt nạ nên cung cấp nhiều thông tin hơn, với tiếp tố và nhãn.

Tránh mặt nạ quá mức với số lượng lớn ký tự hằng. Mặt nạ +7 ([000]) [000]-[00]-[00] chứa 7 ký tự hằng cho 10 ký tự quan trọng — điều này chấp nhận được. Nhưng mặt nạ với dấu phân cách quá mức mà người dùng liên tục phải vượt qua sẽ gây hại nhiều hơn lợi. Nếu bạn không chắc chắn về định dạng — hãy sử dụng nhập liệu tự do.

Cho ứng dụng quốc tế, hãy lưu ý rằng định dạng dữ liệu có thể khác nhau giữa các quốc gia. Số điện thoại ở Mỹ có định dạng +1 (XXX) XXX-XXXX, trong khi ở Ý — +39 XXX XXX XXXX. Sử dụng mặt nạ ưu tiên với tính năng tự động phát hiện quốc gia theo mã hoặc để người dùng chọn quốc gia trước khi nhập số.

Theo kiểm thử UX của InputMask, người dùng thích mặt nạ hiển thị định dạng trước khi bắt đầu nhập (thông qua trình giữ chỗ hoặc tiếp tố) và không chặn nhập ký tự. Mặt nạ nên là một gợi ý, không phải là một hạn chế. Nếu người dùng nhập ký tự không khớp với mặt nạ, tốt hơn nên cho phép hơn là chặn nhập liệu mà không giải thích.