我有以下输入字段
<input type="number" id="zip-code" placeholder="Zip code" />
占位符显示在除 android 4.0 及更高版本之外的普通浏览器中,与其他字段相比,宽度也减小了。
可能是什么错误?
这是默认 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";};
}
})();
通过使用 type = "tel' 而不是 type = "number" 会显示占位符并在焦点上打开数字键盘。
我遇到了同样的问题,我的解决方案是将“类型”字段设置为文本。我认为这是因为 type 属性而发生的。您的占位符文本不是数字!如果您必须强制用户仅使用数字格式,您可以为此使用 javascript 插件,我就是这样做的 :)
尝试这个:
<input type="text" pattern="[0-9]" id="zip-code" placeholder="Zip code">