顯示數字鍵盤在iPhone上使用輸入文本

注意使用input type="number"可以如下顯示數字鍵盤：顯示數字鍵盤在iPhone上使用輸入文本

enter image description here

是否有可能使用input type="text"顯示相同的數字鍵盤？ I 不要想要使用pattern="\d*"顯示數字鍵盤，因爲該值可能包含小數點。

我想使用input type="text"而不是input type="number"的原因是，如果爲數字字段輸入非數字，我無法取回數值。例如，如果我輸入ABC，它將自動變爲空。在我看來，使用input type="text"將更容易進行這種控制。

來源

2013-05-09 red23jordan

這有什麼錯用'類型= 「數字」'？ – deceze 2013-05-09 07:06:22

嗨，我已經編輯了我的問題。謝謝。 – red23jordan 2013-05-09 07:17:12

在HTML5.1中，有一個名爲[「inputmode」]（http://www.w3.org/html/wg/drafts/html/master/forms.html#attr-fe-inputmode）的屬性，它是支持這一點的預期方式。所以你應該有''但是，它並沒有在HTML5中列出，所以我想現在它還沒有實現太多。 – Alohci 2013-05-09 09:48:24

到目前爲止我還找不到任何解決方案。

但你可以做的一個可能的技巧是使用type =「number」，並用document.getElementById（「element」）改變它在javascript中。

但儘管如此，這也將清除的ABC，但它會接受數字逗號和小數

來源

2013-05-16 19:35:27

是的，我用過，但鍵盤變成默認的鍵盤和數字鍵盤沒有打開：（ – red23jordan 2013-06-03 01:29:10

在這裏檢查http://jsfiddle.net/svenkatreddy/REHyd/ 有了這個，你可以得到數字鍵盤和輸入類型仍然是「文本」，但它不會接受Alphabhets（ABC將被清除）和數字鍵盤將只顯示第一次，如果你想多次只是將輸入的值存儲在變量中並將其轉換回輸入類型「數字」對不起，但這是目前唯一可用的黑客。 – 2013-06-04 00:04:05

還有其他類型的可顯示數字鍵盤。

用type =「number」你什麼都不能做。它不會接受任何數字。但是，如果你使用type =「tel」，這是一個醜陋的黑客攻擊，但它是有效的。

這裏是我的郵政編碼例如：

<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">

但是會有一個問題「 - 」在一些屏幕鍵盤鍵，就可以解決這個問題，添加後指定在JavaScript中的字符數破折號像這樣：

// Zip Code dashes 
$('input[type="tel"].zipCode').keyup(function(event) { 
    var t = event.target, v = t.value; 
    if (v.length == 2) { t.value = v + '-'; } 
});

（請原諒jQuery）。而不是使用type =「tel」，你可以使用type =「text」和模式屬性，但我還沒有測試過。很可能它不適用於大多數瀏覽器。

來源

2013-10-11 16:47:57 Harry

在iphone上使用type =「tel」會出現一個鍵盤，無法輸入小數點 – anztenney 2015-07-29 15:58:56

如果您的輸入是真實數字，整數或小數，則使用HTML5 type="number"輸入。這將在Android設備上顯示正確的鍵盤（也假定Windows手機）。

然後訣竅是放置一個pattern="[0-9]*"該屬性強制iOS上的特殊數字鍵盤。需要注意的是：

這並不標誌着一個小數或負，因爲模式屬性actualy不是一個類型=「數字」域中有效簽名是無效的！和
這是只有獲取iOS數字鍵盤的方法。查看字母鍵盤的數字部分（如上面的屏幕截圖）與真正的數字鍵盤相比的區別。

iOS number keyboards compared

最後一個音符時，一定不要使用種類號碼欄的不是真正的數字（例如，有前導零或產品代碼與昏迷或空格郵編）輸入。數字輸入字段可能不會提交非真實數字的值！（取決於瀏覽器/設備）

來源

2014-12-18 03:55:15 davidelrizzo

試試這個workarround。爲我工作。

它會將類型轉換爲數字，然後返回文本。這將強制ios在第一次改變prop時切換到數字鍵槽。 setSelectionRange用於選擇輸入值。

$(function(){ 

    $("input[type='text']").on('mouseup', function(e){ 
     e.preventDefault(); 
    }); 

    $("input[type='text']").on('focus click', function(e){ 
     $(this).prop('type', 'number'); 
     var obj = $(this); 
     setTimeout(function(){ 
      obj.prop('type', 'text'); 
      document.getElementById(obj.attr('id')).setSelectionRange(0, 9999); 
     }, 50);  
    }); 
});

來源

2015-10-23 13:48:24

使用此代碼：

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

來源

2017-02-25 13:21:27

顯示數字鍵盤在iPhone上使用輸入文本

回答

相關問題