Thuộc tính min (cùng max, step) trên <input type="number"> không được hỗ trợ xác thực phía client trên Firefox (tính đến thời điểm bài viết). Chrome, Edge, Safari hỗ trợ đầy đủ.
Ví dụ minh họa
<!DOCTYPE html>
<html>
<head>
<title>HTML input number</title>
</head>
<body>
<form action="" method="get">
Nhập số từ 1 đến 10:
<input type="number" name="num" min="1" max="10"><br>
<input type="submit" value="Gửi">
</form>
</body>
</html>
Hành vi trình duyệt
| Trình duyệt | UI Spinner | Validate min/max client-side |
|---|---|---|
| Chrome / Edge / Safari | Có | Có (chặn submit, hiện bubble) |
| Firefox | Không (hiển thị như text) | Không (bỏ qua min/max) |
Giải pháp cross-browser
- Validate JavaScript (khuyên dùng):
input.addEventListener('input', function() {
var val = parseFloat(this.value);
var min = parseFloat(this.min);
var max = parseFloat(this.max);
if (!isNaN(min) && val < min) this.value = min;
if (!isNaN(max) && val > max) this.value = max;
});
- Polyfill: number-polyfill.
- Dùng type="text" + pattern:
<input type="text" pattern="[1-9]|10" title="1-10">.
Firefox hiện đại (v70+) đã hỗ trợ UI spinner cho type="number", nhưng validate min/max phía client vẫn không hoạt động như Chrome. Luôn validate lại phía server.