Thuộc tính min của input type="number" không hoạt động trên Firefox

Thuộc tính min (và max, step) trên <input type="number"> không được hỗ trợ trên Firefox (tính đến thời điểm bài viết). Chrome, Edge, Safari hỗ trợ tốt.

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ên các trình duyệt

Giải pháp cross-browser

1. Validate bằng JavaScript khi submit hoặc oninput:

input.addEventListener('input', function() {
  var val = parseFloat(this.value);
  if (val < this.min) this.value = this.min;
  if (val > this.max) this.value = this.max;
});

2. Dùng polyfill như number-polyfill để thống nhất hành vi.
3. Dùng <input type="text"> + pattern/regex validate thủ công.

Firefox đã hỗ trợ type="number" UI (spinner) từ phiên bản gần đây, nhưng validate min/max phía client vẫn cần JS để đảm bảo nhất quán.