Mặt nạ ngày đầu vào HTML

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

<form>

 Birthday:

<input type="text" name="input" placeholder="YYYY-MM-DD" required 
pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])-(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])-(?:30))|(?:(?:0\[13578\]|1\[02\])-31))" 
title="Enter a date in this format YYYY-MM-DD"/>

 <input type="submit">

form>

'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

<bảng id="tblForm" đường viền<="0" cellpadding="5" cellspacing="0">

    <tr>

        <td> Ngày sinh. td>

        <td><đầu vào type="text" class="date-format" />td>

        <td><span class="error" style="display: none"> Ngày không hợp lệ. Chỉ cho phép định dạng dd/MM/yyyy. span>td>

    tr>

bảng>table>

 

 

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ị

Làm cách nào để sử dụng dấu hiệu nhập liệu trong HTML?

.

.

Để đặt và lấy ngày loại đầu vào ở định dạng dd-mm-yyyy, chúng tôi sẽ sử dụng thuộc tính loại . Thuộc tính loại

Mặt nạ định dạng ngày tháng cung cấp cấu trúc sử dụng các ký tự và ký hiệu cụ thể để xác định định dạng của trường . Các cấu trúc có thể được áp dụng cho cả dữ liệu đầu vào và đầu ra. Trong đầu vào, một trường phải tuân theo mẫu cụ thể được xác định bởi mặt nạ.