Cách giới hạn số đầu vào trong JavaScript

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 <= 57 có nghĩa là chúng tôi chỉ muốn số thập phân từ 0 đến 9

Lần này chúng tôi đã nhận được sự trợ giúp từ sự kiện onkeypress

Sự kiện onkeypress sẽ được kích hoạt khi người dùng nhấn một phím trên bàn phím

Chúng tôi đã chỉ định chỉ có một số phím bàn phím đặc biệt để có thể điền đầu vào của chúng tôi và chúng tôi đã trả lại chúng từ chức năng nhấn phím của chúng tôi. thuộc tính charCode của sự kiện trình duyệt đã giúp chúng tôi điều đó. (Mỗi phím của bàn phím có một mã ký tự duy nhất để xác định)

❮ Đối tượng số đầu vào

Ví dụ

Nhận giá trị tối đa được phép cho một trường số

var x = tài liệu. getElementById("myNumber"). tối đa;

Định nghĩa và cách sử dụng

Thuộc tính max đặt hoặc trả về giá trị của thuộc tính max của một trường số

Thuộc tính max chỉ định giá trị tối đa cho một trường số

Mẹo. Sử dụng thuộc tính max cùng với thuộc tính min để tạo phạm vi giá trị pháp lý

Mẹo. Để đặt hoặc trả về giá trị của thuộc tính min, hãy sử dụng thuộc tính min

Hỗ trợ trình duyệt

cú pháp

Trả lại thuộc tính tối đa

Đặt thuộc tính tối đa

Giá trị tài sản

chi tiết kỹ thuật

Thêm ví dụ

Ví dụ

Thay đổi giá trị tối đa

tài liệu. getElementById("myNumber"). tối đa = "10";

Trang liên quan

tài liệu tham khảo HTML. Thuộc tính tối đa HTML