9

我有以下输入字段 

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

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

4

4 回答 4

21

这是默认 Android Webkit 浏览器中的一个已知错误。根据这个 QuirksMode page，您可以看到许多版本的 Android 都受此影响。另一方面，适用于 Android 的 Chrome 则不然。

我为此创建了一个简单的 JavaScript 垫片（修复）。首先，阅读这个问题How to display placeholder's text in HTML5's number-typed input，然后如果您仍然想使用这样的占位符，请查看我的解决方案要点。

TL;博士;

按照您的预期保留您的标记；

<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-26T04:23:51.410 回答
11

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

于 2013-10-02T08:59:43.017 回答
0

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

于 2014-07-16T08:33:33.347 回答
-1

尝试这个：

<input type="text" pattern="[0-9]" id="zip-code" placeholder="Zip code">
于 2017-09-27T09:32:55.560 回答