Tôi đã làm việc trên ứng dụng nhật ký tập luyện làm dự án phụ trong sáu tháng qua. Như bạn mong đợi, ứng dụng như vậy yêu cầu nhập số.
Khi bạn dùng autocomplete trong bất kỳ trình soạn mã nào, loại mặc định cho phần tử input là text:
<input type="text" />Phần tử HTML input với type là number chỉ chấp nhận đầu vào số. Thử gõ chữ trong trường nhập số này:
Bạn không thể.
Phần tử HTML input với type text, tuy nhiên, chấp nhận cả văn bản và số. Thử gõ cả số và chữ trong trường nhập văn bản này:
Vâng, nó hoạt động!
Khi tôi ban đầu khai báo input cho số lần lặp (reps) và trọng lượng (weight) trong ứng dụng, tôi không thay đổi loại input mặc định từ text sang number. Tôi thậm chí không nghĩ đến nó. Khi test trên máy tính để bàn, gõ số rất dễ, nên không phiền tôi.
Nhưng ngay khi tôi test ứng dụng trên iPhone 6 của mình, nó trở nên rõ ràng tại sao bạn nên dùng loại input đúng từ đầu.
Nếu loại input của bạn được đặt là text, và bạn nhấp vào trường nhập đó, ít nhất trên iPhone (tôi nghi ngờ Android cũng tương tự), bàn phím gốc sẽ bật lên. Giống như bạn đang soạn tin nhắn cho ai đó.
Như thế này:
Bây giờ, bàn phím gốc này cho bạn truy cập vào số, nhưng trước tiên bạn phải nhấn nút 123. Điều này thêm một bước không cần thiết.
Đối với trường nhập mà mục đích duy nhất là thêm số lần lặp và trọng lượng nâng, chỉ hợp lý là bật bàn phím số trên điện thoại thông minh.
Để làm điều đó, bạn chỉ cần chỉ định rằng bạn muốn phần tử input chấp nhận đầu vào số:
Như sau:
<input type="number" />Và kết quả (trên thiết bị iOS):
Và đó là tất cả!