Mặt nạ đầu vào có thể bị đánh giá thấp hoặc không được sử dụng thường xuyên, nhưng nó hữu ích trong các tình huống khác nhau, đặc biệt nếu bạn nói về việc chỉ định và chấp nhận đầu vào ở định dạng cố định — ví dụ: định dạng cho ngày, số hoặc số điện thoại tùy chỉnh
Để giúp bạn bắt đầu, chúng ta sẽ xem xét hai tình huống khác nhau
Kịch bản mặt nạ đầu vào #1
Đối với tình huống đầu tiên, hãy xem xét tình huống này bằng cách sử dụng yếu tố Văn bản ngắn đơn giản, vì vậy hãy tiếp tục và thêm một yếu tố vào biểu mẫu của bạn ngay bây giờ nếu bạn chưa có. Để xem tùy chọn Input Mask, bạn có thể làm theo các bước dưới đây.
- Nhấp vào phần tử Văn bản ngắn
- Ở bên phải của phần tử, nhấp vào Thuộc tính (biểu tượng bánh răng)
- Chuyển đến tab Tùy chọn
- Cuộn xuống và tìm tùy chọn Input Mask, đảm bảo bật nó.
Với mặt nạ đầu vào, bạn sẽ chỉ sử dụng ba ký tự HTML và các ký tự này được giải thích ngay bên dưới nút chuyển đổi Mặt nạ đầu vào
@ = Chữ cái mặt nạ
# = Số mặt nạ
* = Mặt nạ Chữ & Số
Để giải thích những điều trên một cách đơn giản, Mặt nạ đầu vào về cơ bản cho phép bạn kiểm soát tốt hơn nhiều đối với những gì được nhập và do đó giới hạn người dùng của bạn đối với các đầu vào được che dấu
Điều đó nghe có vẻ hơi khó hiểu, vì vậy hãy phân tích vấn đề này sâu hơn nữa bằng cách xem các ví dụ bên dưới
Ví dụ A
Trong ví dụ này, chẳng hạn, giả sử bạn muốn đặt tên cho các thành phố bắt đầu bằng “St” (Saint), chẳng hạn như “St Augustine” sẽ giống như thế này “@@ @@@@@@@@@“
Mặt sau của biểu mẫu của bạn
Mặt trước của biểu mẫu của bạn
Ví dụ B
Bây giờ, hãy xem qua điều này trong một trường hợp khác mà bạn có thể muốn hiển thị một tập hợp các số cách nhau sẽ hiển thị như thế này “# # # # #“
Mặt sau của biểu mẫu của bạn
Mặt trước của Biểu mẫu của bạn
Ví dụ C
Một cách sử dụng tốt cho Mặt nạ số cũng sẽ dành cho các ngày tùy chỉnh nâng cao mà bạn có thể không muốn sử dụng các trường ngày tiêu chuẩn, chẳng hạn như “##/##/####“
Phần cuối của Biểu mẫu của bạn
Mặt trước của Biểu mẫu của bạn
Ví dụ D
Cả hai điều trên đều tốt, nhưng nếu bạn cần thứ gì đó nhiều hơn thế, nhưng không cần nhiều thông tin như vậy, chẳng hạn như trong trường hợp bạn chỉ muốn địa chỉ đường phố nơi đặt doanh nghiệp của ai đó
Vì vậy, trong trường hợp cụ thể này, bạn sẽ muốn kết hợp những điều trên bằng cách sử dụng cả @ và # cùng nhau và điều đó có thể trông giống như “#### @@@@@@@@@ @@“
Phần cuối của Biểu mẫu của bạn
Mặt trước của Biểu mẫu của bạn
Ví dụ E
Ngoài ra, đừng quên rằng bạn có thể cho phép thêm một trong hai tùy chọn này nhưng vẫn kiểm soát nhưng vẫn giới hạn tùy chọn thứ ba bằng cách sử dụng * (dấu hoa thị) và tùy chọn đó sẽ trông giống như “*** ** **** **
Phần cuối của Biểu mẫu của bạn
Mặt trước của Biểu mẫu của bạn
Ví dụ của
Nhưng nếu không có điều nào ở trên là đủ tốt cho tình huống của bạn thì sao?
Phần cuối của Biểu mẫu của bạn
Mặt trước của Biểu mẫu của bạn
Ví dụ G
Một số ví dụ trên là mặt nạ đầu vào cố định, vậy nếu bạn muốn một cách để người dùng nhập ký tự nhưng không yêu cầu tất cả thì sao. Ví dụ: số thành viên kết thúc bằng một hoặc hai ký tự. Bạn có thể thực hiện che đầu vào là “@@-#####-@[@]“. Như bạn có thể thấy, chúng tôi đang sử dụng Dấu ngoặc vuông cho ký tự tùy chọn
Phần cuối của Biểu mẫu của bạn
Mặt trước của Biểu mẫu của bạn
Bây giờ, hãy thực hiện một cách tiếp cận khác để xem xét vấn đề này theo cách khác bằng cách sử dụng kịch bản thứ hai cho Trường điện thoại
Kịch bản tạo mặt nạ đầu vào #2
Chắc chắn, việc sử dụng khả năng tạo mặt nạ rất tiện lợi, nhưng nếu bạn là nhà cung cấp danh bạ điện thoại đang tìm kiếm các số 1-800 để liệt kê hoặc bạn có người dùng có số điện thoại nước ngoài, v.v. thì sao?
Các trường hợp như thế này là nơi mặt nạ đầu vào trên trường điện thoại sẽ hữu ích cũng như giúp bạn kiểm soát cách nhập và sử dụng số điện thoại của mình
Ví dụ A
Đối với ví dụ đầu tiên, hãy bắt đầu lại nhưng lần này hãy thêm trường điện thoại. Bạn sẽ có thể truy cập tùy chọn Input Mask giống như cách chúng tôi đã mô tả trước đó trong hướng dẫn này
Lần này, bạn sẽ nhận thấy rằng bạn chỉ có thể sử dụng Mặt nạ số với # và bạn cũng sẽ thấy đầu vào số điện thoại mặc định thay đổi từ hai đầu vào thành một đầu vào được thêm sẵn bằng “(###) ###-
Phần cuối của Biểu mẫu của bạn
Mặt trước của Biểu mẫu của bạn
Ví dụ B
Bây giờ để sử dụng điều này cho các số 1-800 với một số điện thoại, bạn có thể đặt nó giống như “1-(8##)-###-####” để cho người dùng của bạn biết đó là loại thông tin cần thiết
Phần cuối của Biểu mẫu của bạn
Mặt trước của Biểu mẫu của bạn
Ví dụ C
Một ví dụ khác, giả sử bạn đang lập kế hoạch chạy một chương trình kêu gọi tiếp cận cộng đồng ở Úc. Bạn cần thu thập các số điện thoại giới hạn ở định dạng đó, vì vậy đối với điều này, nó sẽ trông giống như “+(##)#########” nhưng bạn có thể định dạng nó thành bất kỳ quốc gia nào nếu ở nơi khác.
Phần cuối của Biểu mẫu của bạn
Mặt trước của Biểu mẫu của bạn
Vì vậy, dù sao đi nữa, chúng tôi thực sự hy vọng điều này sẽ giúp làm rõ mọi thứ khi sử dụng Mặt nạ đầu vào
Hãy chơi xung quanh với tùy chọn này. Nếu bạn có bất kỳ đề xuất, mối quan tâm hoặc câu hỏi nào, vui lòng bình luận bên dưới hoặc đăng câu hỏi trên cổng hỗ trợ của chúng tôi