Mặt nạ đầu vào giúp người dùng nhập dữ liệu bằng cách đảm bảo định dạng được xác định trước. Điều này có thể hữu ích cho ngày, số, số điện thoại,. Bạn có thể sử dụng input-mask
với vai trò input
và với phần tử đầu vào cốt lõi
Khi đầu vào ngày được HTML5 thêm vào, nhiều người tin rằng nó sẽ cung cấp cho người dùng một phương pháp nhập ngày trên trang web thân thiện, tương tác và đã biết. Tuy nhiên;
Ban đầu, thuộc tính nhập ngày tháng được thiết kế như một phần tử biểu mẫu để chọn các giá trị thông qua bộ đếm ngày tháng. Tuy nhiên, vấn đề nằm ở việc triển khai công cụ hẹn hò thay đổi từ trình duyệt này sang trình duyệt khác. Về cơ bản, điều đó có nghĩa là với tư cách là nhà thiết kế web, bạn phải có ý định cho phép người dùng chọn ngày ở định dạng YYYY/MM/DD thông qua công cụ chọn ngày và bạn đã thiết kế xác thực HTML của mình cho phù hợp, nhưng khi người dùng truy cập trang web thông qua trình duyệt trên
Hiện tại, không có quy tắc nào trong HTML5 cho phép các nhà thiết kế web thay đổi định dạng trong đó phần tử ngày chọn giá trị. Do đó, sự cứng nhắc của yếu tố ngày tháng đã khiến các nhà thiết kế tìm kiếm những cách khác để thay đổi định dạng của ngày tháng mà người dùng nhập vào
Giả sử chúng ta muốn thiết kế một trang web hỏi người dùng về ngày sinh của họ và định dạng của giá trị được nhập phải là YYYY-MM-DD. Làm cách nào chúng ta đạt được điều này bằng cách sử dụng phần tử ngày tháng vì nó không cho phép tự do thay đổi định dạng ngày tháng?
Nếu định dạng ngày là cực kỳ quan trọng đối với hoạt động của trang web, thì chúng tôi sẽ cần đưa ra lựa chọn đó. Dưới đây là đoạn mã có định dạng ngày được thay đổi thành định dạng YYYY-MM-DD
Birthday:
'Thành phần ngày tháng ở đâu?' Như chúng tôi đã nói, không thể đạt được điều đó chỉ với HTML5 nếu chúng tôi chỉ sử dụng thành phần ngày tháng, nhưng chúng tôi chưa bao giờ nói rằng không thể đạt được điều đó nếu chúng tôi không sử dụng thành phần ngày tháng
Con trỏ chính xung quanh mã
- Người dùng sẽ cần nhập các giá trị theo cách thủ công vì anh ta sẽ không có đặc quyền chọn chúng từ bộ đếm ngày
- Phần tử mẫu đảm bảo rằng các giá trị đã nhập là hợp lệ. Do đó, thuộc tính mẫu được sử dụng để đạt được xác thực biểu mẫu HTML
- Phần tử bắt buộc buộc người dùng phải nhập một số giá trị vì trường này không được để trống
- Dấu ngoặc đơn đầu tiên trong phần mẫu kiểm tra các giá trị năm chính xác, theo sau là giá trị tháng chính xác và giá trị ngày chính xác
- Để thay đổi ngày sang một định dạng khác, chúng ta chỉ cần thay đổi trình tự của ba lần kiểm tra và dấu phân cách được sử dụng, theo yêu cầu. Dưới đây là mã lấy ngày ở định dạng 'YYYY/MM/DD'
Giải pháp này có nhược điểm là không có popup chọn ngày. Giải pháp sẽ quay trở lại một trong các tiện ích công cụ hẹn hò của jquery
Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách che dấu Định dạng ngày dd/MM/yyyy trong TextBox bằng JavaScript
Bài viết này sẽ minh họa cách tự động ẩn định dạng dd/MM/yyyy trong TextBox bằng cách tự động thêm ký tự Dấu gạch chéo sau ký tự thứ 2 và ký tự thứ 4 bằng JavaScript
Đánh dấu HTML
Đánh dấu HTML sau bao gồm một TextBox
Hộp văn bản cần được xác thực cho Ngày được gán định dạng ngày CssClass và nó cũng có các phần tử SPAN HTML được liên kết để hiển thị thông báo xác thực không thành công
Ngày không hợp lệ. Chỉ cho phép định dạng dd/MM/yyyy. td>
Tạo mặt nạ định dạng ngày dd/MM/yyyy trong TextBox bằng JavaScript
Bên trong cửa sổ. trình xử lý sự kiện onload, trước tiên, tất cả các phần tử HTML INPUT được tìm nạp từ Bảng HTML và sau đó một vòng lặp sẽ chạy trên các phần tử được tìm nạp
Bên trong vòng lặp, một kiểm tra được thực hiện để xác định xem phần tử HTML INPUT có phải là TextBox hay không và liệu nó có CssClass có tên định dạng ngày hay không
Khi cả hai điều kiện là TRUE,
1. Thuộc tính MaxLength được đặt thành giá trị 10
2. Trình xử lý sự kiện KeyDown được chỉ định gọi hàm JavaScript IsNumeric
3. Trình xử lý sự kiện KeyUp được chỉ định gọi hàm JavaScript ValidateDateFormat
hàm IsNumeric
Chức năng này chỉ cho phép nhập Số [chữ số] vào TextBox, điều này được thực hiện bằng cách kiểm tra các Mã khóa và hủy tất cả các Mã khóa không phải là Số [chữ số]
Nó cũng tự động thêm ký tự Dấu gạch chéo [ / ]
Hàm ValidateDateFormat
Hàm này xác thực giá trị Ngày đối với Biểu thức chính quy và nếu xác thực không thành công, tôi. e. nếu Định dạng ngày không phải là dd/MM/yyyy, thì phần tử SPAN HTML được liên kết của nó trong cùng một hàng của Bảng HTML sẽ được hiển thị