Nên dùng gì thay cho input number cho định dạng số

Có thể bạn sẽ nghĩ ngay đến <input type='number' /> khi muốn cho user nhập số. Tuy nhiên đời không như là mơ, nó có kha khá vấn đề, đôi khi có những giá trị nhìn thì như số, nhưng không phải (như credit card), hoặc một dạng chuỗi số.

Trên Gov.uk họ dùng kiểu này

<input type="text" inputmode="numeric" pattern="[0-9]*">

Thuộc tính inputmode cũng khá hay ho, được đề cập rất cụ thể ở đây

Tóm tắt lại cho bạn nào lười đọc

tel

<input type="text" inputmode="tel" />

decimal

<input type="text" inputmode="decimal" />

Email

<input type="text" inputmode="email" />

Url

<input type="text" inputmode="url" />

Search

<input type="text" inputmode="search" />

Hoặc để nhập vào mã code xác thực, Twilio sử dụng định dạng này

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

Với autocomplete="one-time-code" chúng ta sẽ có được tính năng tự điền như thế này

Xem danh sách autocomplete đầy đủ

What to Use Instead of Number Inputs

Bài viết gốc tại Vuilaptrinh