Giải pháp tiêu chuẩn để hạn chế người dùng chỉ nhập các giá trị số là sử dụng các phần tử của loại số. Nó có xác thực tích hợp để từ chối các giá trị không phải là số. Điều này được thể hiện dưới đây
HTML
1
2
< . for="salary">Enter your salary:
Chỉnh sửa trong JSFiddle
2. Sử dụng thuộc tính pattern
Ngoài ra, bạn có thể sử dụng thuộc tính mẫu để chỉ định một biểu thức chính quy khớp với dữ liệu đầu vào được cung cấp
Việc sử dụng thuộc tính mẫu được trình bày bên dưới. Nếu các giá trị chứa các ký tự không phải chữ số, thì phần tử khớp với các lớp giả CSS :invalid
Như chúng ta đã biết, trường chỉ định một trường để nhập số. Nếu bạn muốn giới hạn trường chỉ ở số dương, bạn có thể sử dụng thuộc tính min
Title of the document
Như bạn có thể thấy trong ví dụ trên, chỉ sử dụng thuộc tính min có tác dụng đối với các mũi tên bộ chọn và bạn vẫn có thể nhập số âm
Để hạn chế số âm cho mũi tên, cũng như không cho phép nhập số âm, hãy thử cách sau
Title of the document
Ở đây, chúng tôi đã sử dụng sự kiện oninput, sự kiện này sẽ xác thực đầu vào dựa trên tiêu chí của chúng tôi [số tối thiểu phải ít nhất là 0 và chúng tôi không muốn có bất kỳ số âm nào. ]
Như bạn đã biết, các sự kiện trong JavaScript được thực thi khi một điều gì đó cụ thể, chẳng hạn như nhấp chuột, nhập đầu vào, v.v., xảy ra
Người dùng nhập giá trị. Nếu nó hợp lệ thực sự. giá trị, nó sẽ được điền vào đầu vào, HOẶC nó sẽ sai và đầu vào sẽ trống value=""
Có thể bạn đã để ý, hiện tại chúng ta vẫn có thể viết số thực dương như 1. 12, nhưng ngay sau khi nhập nó, các số sau dấu chấm sẽ được thay thế bằng một chuỗi trống [Hãy nhớ điều kiện của chúng tôi về giá trị = ""]
Hãy thử gõ 1. 23 hoặc bất kỳ số nào tương tự để xem chúng ta đang nói về điều gì
Chúng tôi muốn số thập phân rõ ràng trong đầu vào của chúng tôi. chúng ta đi đây
Đoạn mã trên kiểm tra với mọi đầu vào mà người dùng cố gắng nhập đồng thời chỉ là số và dương
Cũng lưu ý rằng sự kiện. charCode >= 48 && sự kiện. charCode