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

【问题标题】：Placeholder text for an input type="number" does not show in webkit ICS输入类型 =“数字”的占位符文本未显示在 webkit ICS 中
【发布时间】：2012-07-19 13:06:00
【问题描述】：

我有以下输入字段

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

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

【问题讨论】：

标签： android html

【解决方案1】：

在默认的 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";};
    }
})();

【讨论】：

在 Jellybean 下，此解决方案仅在部分时间有效，导致响应用户点击而丢失键盘。在捕获模式下运行这段代码似乎可以解决很多这些问题。
@KevinDecker 感谢您对其进行测试-您能解释一下捕获模式的含义吗？
是否有可能在 Android 2.3 上它不起作用，但它在更高版本上起作用？谢谢
@aaronsnoswell 您可以调整它以使其在 W3C 验证器中有效，只需实际从服务器加载页面，最初使用 type=text 和类似 data-typenumber 的标识符，然后应用事件侦听器（ onfocus, onblur) 直接到input[data-typenumber] 输入...

【解决方案2】：

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

【讨论】：

电话仅适用于美国，但不适用于需要 alhpa 数字字符的国际邮政编码。
在这个问题的具体上下文中，@TaeKwonJoe 是对的。但总的来说，这是迄今为止问题标题的最佳解决方案：'Placeholder text for an input type=“number” does not show in webkit'。毕竟标题没有说明问题是zip-code相关的。

【解决方案3】：

我遇到了同样的问题，我的解决方案是将“类型”字段设置为文本。我认为这是因为 type 属性而发生的。您的占位符文本不是数字！如果您必须强制用户仅使用数字格式，您可以为此使用 javascript 插件，我就是这样做的 :)

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：

请不要使用 try this 作为答案。解释你做了什么以及为什么。