佔位符文字的輸入類型=「數字」不webkit的ICS顯示

我有以下輸入字段佔位符文字的輸入類型=「數字」不webkit的ICS顯示

<input type="number" id="zip-code" placeholder="Zip code" />

佔位符顯示在正常瀏覽器除了Android 4.0以上，並且寬度也得到減小相比到其他領域。
什麼可能是錯誤？

來源

2012-07-20 Shinoj

這是默認Android Webkit瀏覽器中的known bug。根據this QuirksMode page，你可以看到很多Android版本都遭受了這個問題。另一方面，Android版Chrome不支持。

我爲此創建了一個簡單的JavaScript填充（修復）。首先，閱讀這個問題How to display placeholder's text in HTML5's number-typed input，然後如果你仍然想使用這樣的佔位符，結賬my solution gist。

TL; DR;

留下你的標記，因爲你期望;

<input type="number" placeholder="Enter some numbers" />

然後在頁面加載後運行這些腳本中的任意一個;

// jQuery version 
$("input[type='number']").each(function(i, el) { 
    el.type = "text"; 
    el.onfocus = function(){this.type="number";}; 
    el.onblur = function(){this.type="text";}; 
}); 

// Stand-alone version 
(function(){ var elms = document.querySelectorAll("input"), i=elms.length; 
    while(i--) { 
     var el=elms[i]; if(el.type=="number"]) 
      el.type="text", 
      el.onfocus = function(){this.type="number";}, 
      el.onblur = function(){this.type="text";}; 
    } 
})();

來源

2012-09-26 04:23:51 aaronsnoswell

謝謝aaronsnoswell :) – Shinoj 2012-09-27 05:20:42

在Jellybean下，此解決方案僅適用於部分時間，導致鍵盤丟失以響應用戶的點擊。在捕獲模式下運行此代碼似乎可以消除很多這些問題。 – 2012-11-03 16:41:35

@KevinDecker謝謝你測試它 - 你能解釋一下你的意思是捕捉模式嗎？ – aaronsnoswell 2012-11-04 02:24:28

通過使用類型=「電話‘而不是類型=‘顯示佔位符和數字鍵盤打開焦點號’。

來源

2013-10-02 08:59:43

Tel只適用於美國，但不適用於需要alhpa-numeric字符的國際郵政編碼。 – TaeKwonJoe 2013-11-13 22:16:43

這不僅僅是一種解決方法嗎？ – ViniciusPires 2014-02-13 17:29:25

在這個問題的具體情況下，@TaeKwonJoe是對的。但總的來說，這是迄今爲止問題標題的最佳解決方案：「輸入類型的佔位符文本=」數字「不會顯示在webkit中。畢竟，標題沒有說明問題是與'zip-code'有關。 – 2014-07-10 15:07:27

我有同樣的問題，我的解決辦法是設置’類型「字段作爲文本，我認爲這是因爲type屬性發生的，佔位符文本不是數字！如果你不得不強制用戶使用數字格式，你可以使用javascript插件來實現這一點，我這樣做：）

來源

2014-07-16 08:33:33

-1

試試這個：

<input type="text" pattern="[0-9]" id="zip-code" placeholder="Zip code">

來源

2017-09-27 09:32:55

請不要使用*試試這個*作爲答案。解釋你所做的事情和原因。 – Jens 2017-09-27 09:51:47

佔位符文字的輸入類型=「數字」不webkit的ICS顯示

回答

相關問題