HTML phút số đầu vào và tối đa không hoạt động đúng

Question

Tôi có type=number lĩnh vực đầu vào và tôi đã thiết min và max giá trị cho nó:

<input type="number" min="0" max="23" value="14"> 

Khi tôi thay đổi thời gian trong giao diện người dùng trả lại bằng cách sử dụng mũi tên nhỏ trên phía bên tay phải của trường nhập, mọi thứ hoạt động đúng - Tôi không thể đi quá 23 trở xuống 0. Tuy nhiên, khi tôi nhập số bằng tay (sử dụng bàn phím), thì không hạn chế nào có hiệu lực.

Có cách nào để ngăn mọi người nhập bất kỳ số nào họ muốn không?

Answer 1

Với HTML5 max và min, bạn chỉ có thể giới hạn giá trị để nhập các chữ số. Nhưng bạn cần sử dụng JavaScript hoặc jQuery để thực hiện loại thay đổi này. Một ý tưởng tôi có là sử dụng data- thuộc tính và lưu các giá trị cũ:

$(function() { 
 
    $("input").keydown(function() { 
 
    // Save old value. 
 
    $(this).data("old", $(this).val()); 
 
    }); 
 
    $("input").keyup(function() { 
 
    // Check correct, else revert back to old value. 
 
    if (parseInt($(this).val()) <= 23 && parseInt($(this).val()) >= 0) 
 
     ; 
 
    else 
 
     $(this).val($(this).data("old")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="number" min="0" max="23" value="14" />

Answer 2

lẽ Thay vì sử dụng "số" loại mà bạn có thể sử dụng "phạm vi" kiểu đó sẽ hạn chế việc sử dụng từ nhập số vì nó sử dụng thanh trượt và nếu bạn muốn định cấu hình để hiển thị số hiện tại chỉ cần sử dụng JavaScript

Answer 3

nếu bạn vẫn đang tìm câu trả lời, bạn có thể sử dụng kiểu nhập = "số".
phút làm việc tối đa nếu nó thiết lập theo thứ tự:
1 tên
2 maxlength
3 kích thước
4 phút
5-max
chỉ cần sao chép nó

<input name="X" maxlength="3" size="2" min="1" max="100" type="number" /> 

khi bạn nhập số/chữ cái theo cách thủ công (sử dụng bàn phím) và gửi một thông báo nhỏ sẽ xuất hiện trong trường hợp chữ cái "vui lòng nhập số" trong trường hợp số ra khỏi phạm vi "vui lòng chọn giá trị không nhiều hơn/ít hơn hơn .. "

Answer 4

Trong một số trường hợp, có thể sử dụng pattern thay vì min và max. Nó hoạt động chính xác với required.