Điện thoại: bàn phím số để nhập văn bản

Có cách nào để buộc bàn phím số xuất hiện trên điện thoại <input type="text">không? Tôi mới nhận ra rằng <input type="number">trong HTML5 là dành cho các số có dấu phẩy động, nên nó không phù hợp với số thẻ tín dụng, mã ZIP, v.v.

Tôi muốn mô phỏng chức năng bàn phím số của <input type="number">, đối với các đầu vào lấy các giá trị số khác với số dấu phẩy động. Có, có lẽ, một inputloại thích hợp khác mà làm điều đó?

Bạn có thể làm <input type="text" pattern="\d*">. Điều này sẽ khiến bàn phím số xuất hiện.

Xem tại đây để biết thêm chi tiết: Hướng dẫn lập trình văn bản, web và chỉnh sửa cho iOS

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

Vào giữa năm 2015, tôi tin rằng đây là giải pháp tốt nhất:

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

Điều này sẽ cung cấp cho bạn bàn phím số trên cả Android và iOS:

Nó cũng cung cấp cho bạn hành vi máy tính để bàn dự kiến ​​với các nút mũi tên lên / xuống và tăng phím mũi tên lên / xuống thân thiện với bàn phím:

Hãy thử nó trong đoạn mã này:

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

Bằng cách kết hợp cả hai type="number"và pattern="[0-9]*, chúng tôi có được một giải pháp hoạt động ở mọi nơi. Và, chuyển tiếp tương thích với inputmodethuộc tính đề xuất HTML 5.1 trong tương lai .

Lưu ý: Sử dụng một mẫu sẽ kích hoạt xác thực mẫu gốc của trình duyệt. Bạn có thể vô hiệu hóa điều này bằng cách sử dụng novalidatethuộc tính hoặc bạn có thể tùy chỉnh thông báo lỗi cho xác thực không thành công bằng cách sử dụng titlethuộc tính.

Nếu bạn cần có thể nhập các số 0, dấu phẩy hoặc chữ cái hàng đầu - ví dụ: mã bưu chính quốc tế - hãy xem biến thể nhỏ này .

Tín dụng và đọc thêm:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-su/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- bàn phím số/

Tôi đã thấy rằng, ít nhất là đối với các trường giống như "mật mã", làm một việc gì đó giống như <input type="tel" />kết thúc việc tạo ra trường xác định số xác thực nhất và nó cũng có lợi ích là không tự động định dạng . Ví dụ, trong một ứng dụng di động mà tôi đã phát triển cho Hilton gần đây, tôi đã kết thúc việc này:

... và khách hàng của tôi đã rất ấn tượng.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

Sử dụng type="email"hoặc type="url"sẽ cung cấp cho bạn một bàn phím trên một số điện thoại, chẳng hạn như iPhone. Đối với số điện thoại, bạn có thể sử dụng type="tel".

Có một mối nguy hiểm với việc sử dụng <input type="text" pattern="\d*">để đưa lên bàn phím số. Trên firefox và chrome, biểu thức chính quy có trong mẫu khiến trình duyệt xác thực đầu vào cho biểu thức đó. lỗi sẽ xảy ra nếu nó không khớp với mẫu hoặc để trống. Hãy nhận biết các hành động ngoài ý muốn trong các trình duyệt khác.

<input type="text" inputmode="numeric">

Với Inputmode, bạn có thể đưa ra gợi ý cho trình duyệt.

Tôi nghĩ type="number"là tốt nhất cho trang web ngữ nghĩa. Nếu bạn chỉ muốn thay đổi bàn phím, bạn có thể sử dụng type="number"hoặc type="tel". Trong cả hai trường hợp, iPhone không hạn chế nhập liệu của người dùng. Người dùng vẫn có thể nhập (hoặc dán) bất kỳ ký tự nào mình muốn. Thay đổi duy nhất là bàn phím hiển thị cho người dùng. Nếu bạn muốn bất kỳ hạn chế nào ngoài điều này, bạn cần sử dụng JavaScript.

Đối với tôi giải pháp tốt nhất là:

Đối với các số nguyên, sẽ xuất hiện pad 0-9 trên Android và iphone

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

Bạn cũng có thể muốn làm điều này để ẩn các spinners trong firefox / chrome / safari, hầu hết khách hàng nghĩ rằng họ trông xấu xí

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

Và thêm novalidate = 'novalidate' vào phần tử biểu mẫu của bạn, nếu xác thực tùy chỉnh của bạn

Cuối cùng, chỉ trong trường hợp bạn thực sự muốn số dấu phẩy động, bước tới bất kỳ độ chính xác nào bạn thích, sẽ thêm '.' với Android

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

Năm 2018:

<input type="number" pattern="\d*">

đang làm việc cho cả Android và iOS.

Tôi đã thử nghiệm trên Android (^ 4.2) và iOS (11.3)

Bạn có thể thử như thế này:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

Nhưng hãy cẩn thận: Nếu đầu vào của bạn chứa thứ gì đó không phải là số, nó sẽ không được truyền đến máy chủ.

Tôi không thể tìm thấy loại phù hợp nhất với mình trong mọi tình huống: Tôi cần mặc định cho mục nhập số (ví dụ: mục "7.5") nhưng cũng có lúc cho phép văn bản (ví dụ "vượt qua"). Người dùng muốn có một bàn phím số (ví dụ: mục 7.5) nhưng mục nhập văn bản không thường xuyên được yêu cầu (ví dụ "vượt qua").

Thay vào đó, những gì tôi đã làm là thêm một hộp kiểm vào biểu mẫu và cho phép người dùng chuyển đổi đầu vào của tôi (id = "inputSresult") giữa type = "number" và type = "text".

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

Sau đó, tôi đã kết nối một trình xử lý nhấp chuột vào hộp kiểm chuyển đổi loại giữa văn bản và số dựa trên việc hộp kiểm ở trên có được chọn hay không:

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

Điều này làm việc tốt cho chúng tôi.

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

nó sẽ cung cấp cho bạn nhập văn bản bằng cách sử dụng bàn phím số

thử cái này:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

tham khảo: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask