Computer >> Máy Tính >  >> Lập trình >> HTML

Cách làm cho phần tử nhập HTML hiển thị bàn phím số trên điện thoại thông minh

Tôi đang làm việc trên trình ghi nhật ký đào tạo ứng dụng như một dự án phụ trong sáu tháng qua. Như bạn mong đợi, một ứng dụng như vậy yêu cầu đầu vào số.

Khi bạn sử dụng tính năng tự động hoàn thành trong bất kỳ trình soạn thảo mã nào, loại mặc định cho phần tử đầu vào là văn bản:

<input type="text" />

Phần tử đầu vào HTML có kiểu số chỉ chấp nhận đầu vào số. Hãy thử nhập các chữ cái bên trong trường nhập số này:

Bạn không thể.

Các phần tử đầu vào HTML có loại văn bản tuy nhiên, chấp nhận cả văn bản và số. Hãy thử nhập cả số và chữ cái bên trong trường nhập văn bản này:

Yay, nó hoạt động!

Khi tôi khai báo đầu vào cho đại diện và trọng lượng trong ứng dụng của mình, tôi đã không thay đổi loại nhập mặc định từ văn bản thành số. Tôi thậm chí còn không nghĩ về nó. Khi thử nghiệm trên máy tính để bàn, việc nhập số rất dễ dàng nên không làm phiền tôi.

Nhưng ngay sau khi tôi thử nghiệm ứng dụng của mình trên iPhone 6, rõ ràng là tại sao bạn cũng có thể sử dụng đúng loại đầu vào ngay từ đầu.

Nếu loại của phần tử đầu vào của bạn được đặt thành văn bản và bạn nhấp vào trường nhập đó, ít nhất là iPhone, (tôi nghi ngờ nó tương tự trên Android) thì bàn phím gốc của bạn sẽ bật lên. Như thể bạn đang viết một tin nhắn văn bản cho ai đó.

Như thế này:

Cách làm cho phần tử nhập HTML hiển thị bàn phím số trên điện thoại thông minh

Bây giờ, bàn phím gốc này cho phép bạn truy cập vào các số, nhưng trước tiên, bạn phải nhấp vào 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 liệu có mục đích duy nhất là thêm số đại diện và trọng lượng đã nâng, việc bật bàn phím số trên điện thoại thông minh chỉ có ý nghĩa.

Để làm điều đó, bạn chỉ cần chỉ định rằng bạn muốn phần tử đầu vào của mình chấp nhận đầu vào số:

Như thế này:

<input type="number" />

Và kết quả (trên thiết bị iOS):

Cách làm cho phần tử nhập HTML hiển thị bàn phím số trên điện thoại thông minh

Và đó là tất cả những gì cần làm!