Cách buộc bàn phím với số trong trang web dành cho thiết bị di động trong Android

Tôi có một trang web dành cho thiết bị di động và nó có một số inputphần tử HTML trong đó, như sau:

<input type="text" name="txtAccessoryCost" size="6" />

Tôi đã nhúng trang web vào một WebViewứng dụng Android 2.1 để có thể sử dụng, để nó cũng sẽ là một ứng dụng Android.

Có thể nhận được bàn phím với các số thay vì bàn phím mặc định có các chữ cái khi inputphần tử HTML này được đặt tiêu điểm không?

Hoặc, có thể đặt nó cho toàn bộ ứng dụng (có thể là một cái gì đó trong tệp Manifest ), nếu nó không khả thi cho một phần tử HTML?

<input type="number" />
<input type="tel" />

Cả hai đều hiển thị bàn phím số khi đầu vào được lấy nét.

<input type="search" /> hiển thị bàn phím bình thường có thêm nút tìm kiếm

Mọi thứ khác dường như mang đến bàn phím tiêu chuẩn.

LƯU Ý QUAN TRỌNG

Tôi đăng bài này như một câu trả lời, không phải một bình luận, vì nó là thông tin khá quan trọng và nó sẽ thu hút nhiều sự chú ý hơn ở định dạng này.

Như các nghiên cứu sinh khác đã chỉ ra, bạn có thể buộc thiết bị hiển thị cho bạn bàn phím số bằng type="number"/ type="tel", nhưng tôi phải nhấn mạnh rằng bạn phải cực kỳ thận trọng với điều này.

Nếu ai đó mong đợi một số bắt đầu bằng các số không, chẳng hạn như 000222, thì họ có thể gặp sự cố, vì một số trình duyệt (ví dụ: Chrome dành cho máy tính để bàn) sẽ gửi đến máy chủ222 , đây không phải là điều họ muốn.

Về type="tel"tôi không thể nói bất cứ điều gì tương tự nhưng cá nhân tôi không sử dụng nó, vì hành vi của nó trên các điện thoại khác nhau có thể khác nhau. Tôi đã tự giới hạn mình trong những thứ đơn giản pattern="[0-9]*"không hoạt động trong Android

Điều này sẽ hoạt động. Nhưng tôi gặp vấn đề tương tự trên điện thoại Android.

<input type="number" /> <input type="tel" />

Tôi phát hiện ra rằng nếu tôi không bao gồm jquerymobile-framework, thì bàn phím sẽ hiển thị chính xác trên hai loại trường.

Nhưng tôi vẫn chưa tìm ra giải pháp để giải quyết vấn đề đó, nếu bạn thực sự cần sử dụng jquerymobile.

CẬP NHẬT: Tôi phát hiện ra rằng nếu thẻ biểu mẫu được lưu trữ ngoài

<div data-role="page"> 

Bàn phím số không được hiển thị. Đây hẳn là một lỗi ...

inputmodetheo specWG là phương thức mặc định.

Đối với thiết bị iOS thêm pattern cũng có thể hữu ích.

Để sử dụng khả năng tương thích ngược typevì Chrome sử dụng chúng từ phiên bản 66.

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

Một số trình duyệt igoners gửi số 0 đứng đầu đến máy chủ khi loại đầu vào là "số". Vì vậy, tôi sử dụng kết hợp jquery và html để tải bàn phím số và cũng đảm bảo rằng giá trị được gửi dưới dạng văn bản chứ không phải số:

$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">

input type = number

Khi bạn muốn cung cấp đầu vào số, bạn có thể sử dụng giá trị thuộc tính kiểu đầu vào HTML5 = "number".

<input type="number" name="n" />

Đây là bàn phím xuất hiện trên iPhone 4:

Ảnh chụp màn hình iPhone về số kiểu nhập HTML5 Android 2.2 sử dụng bàn phím này cho kiểu = số:

Ảnh chụp màn hình của Android về số loại đầu vào HTML5

Thêm thuộc tính bước vào đầu vào số

<input type="number" step="0.01">

Nguồn: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html