<input type=“number”/>未在 iOS 上顯示數字鍵盤

Question

根據Apple 的文檔，當我設置帶有number類型的輸入元素時，我應該得到一個數字鍵盤。

<input type="number"/>

number ：用於指定數字的文本字段。 在 iOS 3.1 及更高版本中調出數字鍵盤。

看起來該死的幾乎不可能搞砸。 但是，當我在我的 iPhone 或模擬器（都是 iOS6）上查看這個簡單的小提琴時，數字鍵盤沒有出現，而是使用標准的字母鍵盤。

http://jsfiddle.net/Cy4aC/3/

我到底可能在這里搞砸了什么？

Answer 1

您需要指定模式：

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

由於number可以為負數或浮點數，因此-和. 和,應該在鍵盤中可用，除非您指定僅數字模式。

Answer 2

從 ios 12.2（2019 年 3 月 25 日發布）開始，此解決方案將起作用，並且實現起來最簡單

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

這將僅顯示數字鍵盤，而沒有使用 input="tel" 附帶的 #+* 字符

Answer 3

我不確定這是否是您想要的，但輸入 type = "tel" 會給您“電話號碼鍵盤”。

Answer 4

根據我的經驗，這在瀏覽器之間非常不一致。 對於我的用例，iOS 在正確支持它之間來回切換。 我通常只希望默認顯示的鍵盤是數字鍵盤。 我上次檢查時，使用 input type="number" 正確調出數字鍵盤，但忽略了“size”屬性，這嚴重影響了我的移動格式。 我為所有我希望默認使用數字鍵盤的輸入添加了一個屬性，並且當瀏覽器檢測到可以正常工作時，我使用 jQuery 更改任何屬性（即 type="number"）。 這樣我就不必返回並更新各個輸入，並允許我只在支持的瀏覽器中應用它。

如果主要的移動操作系統除了輸入類型之外還有一個“默認鍵盤”的屬性，那就太好了。 如果用戶輸入地址或郵政編碼怎么辦？ 通常那些以數字開頭，因此默認情況下顯示數字鍵盤，但允許任何文本，是有幫助的。

至於驗證，我不能依賴瀏覽器來支持特定輸入類型的驗證，所以我使用 javascript 和服務器端驗證。

Answer 5

問候。 我知道這個問題很老，但我覺得這是一個非常受歡迎的解決方案，並決定發布答案。

這是我為解決 iPad 鍵盤以及幾乎所有問題而創建的解決方案。

此外，這種方法不需要您使用數字類型的輸入，在我看來這是非常難看的。

在下面，您可能會找到一個工作版本。

對 Apple iPad 鍵盤按鍵的思考...

我必須創建一個 keyPress 事件處理程序來捕獲和抑制 iPad 上似乎沒有由 keyDown 事件處理或不明確的鍵？？？！

 // Bind keydown event to all input type=text in form. $("form input[type=text]").keydown(function (e) { // Reference to keyCodes... var key = e.which || e.keyCode; // Reference to shiftKey... var shift_key = e.shiftKey; // Reference to ctrlKey... var ctrl_key = e.ctrlKey; // Reference to altKey... var alt_key = e.altKey; // When user presses the shiftKey... if(e.shiftKey) { //...supress its click and whatever key follows after it. console.log(e.shiftKey + ' and ' + key + ' supressed.'); // Deny return false; // ONLY Allow Numbers, Numberpad, Backspace & Tab } else if ( (key >= 48 && key <=57) || (key >= 96 && key <=105) || (key >= 8 && key <=9) ) { // Allow return true; } else { // Deny every other key and/or shift + key combination NOT explicitly declared. return false; } }); // KeyPresss to handle remaining iPAD keyboard keys! // These keys don't seem to be handled by the keyDown event or are ambiguous???! // Bind keypress event to all input type=text in form. $("form input[type=text]").keypress(function (e) { // Reference to keyCodes... var key = e.which || e.keyCode; // Reference to shiftKey... var shift_key = e.shiftKey; // Reference to ctrlKey... var ctrl_key = e.ctrlKey; // Reference to altKey... var alt_key = e.altKey; switch (key) { // Character -> ^ case 94: return false; // Character -> # case 35: return false; // Character -> $ case 36: return false; // Character -> @ case 64: return false; // Character -> & case 38: return false; // Character -> * case 42: return false; // Character -> ( case 40: return false; // Character -> ) case 41: return false; // Character -> % case 37: return false; // Character -> ! case 33: return false; } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action=""> <label for="text1">Numbers, Numberpad, Backspace & Tab ONLY:</label> <input id="text1" type="text" placeholder="0" min="0" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4"> </form>

Answer 6

在閱讀並嘗試了很多想法之后，我發現沒有一個能夠准確顯示僅包含數字和昏迷或點的鍵盤。

我在這個輸入上只使用了<input type="number">和一個onkeyup處理程序，我在那里做這樣的事情：

var previousValue = localStorage.getItem('myInputId');
if (input.getAttribute('type') === "number" && input.validity && input.validity.badInput) {
    input.value = previousValue || "";
}
localStorage.setItem('myInputId', input.value);

如果存在有效性錯誤，這可以防止用戶通過將值替換為前一個值來編寫錯誤的字符（我不知道這是 iOS 對象還是標准）

當心我沒有測試這個代碼片段，因為我身邊有更復雜的東西，但我希望你能明白

有了這個解決方案：

• 在 iOS 上：用戶有一個完整的經典鍵盤，但默認情況下在數字上打開並且不能寫錯字符。
• 在 Android 上，數字鍵盤是完美的。
• 將來我們可以希望 iOS 會觸發良好的數字鍵盤，並且永遠不會調用 javascript 部分。