输入类型="数字"的占位符文本未显示在webkit ICS中

Question

我有以下输入字段

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

除了android 4.0及更高版本之外,占位符显示在普通浏览器中,与其他字段相比,宽度也会减少.
可能是什么错误？

Answer 1

这是默认Android Webkit浏览器中的已知错误.根据这个QuirksMode页面,您可以看到许多版本的Android都受此影响.另一方面,Chrome for Android则没有.

我为此创建了一个简单的JavaScript填充程序(修复).首先,阅读此问题如何在HTML5的数字类型输入中显示占位符的文本,然后如果您仍想使用这样的占位符,请查看我的解决方案要点.

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";};
    }
})();

Answer 2

通过使用type ="tel"而不是type ="number",将显示占位符并在焦点上打开数字键盘.