输入类型=" number"的占位符文本不会显示在webkit ICS中 [英] Placeholder text for an input type="number" does not show in webkit ICS

问题描述

我有以下输入字段：

I have the following input field

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

占位符显示在普通浏览器中，除了Android 4.0及更高版本，其宽度也会减小。
可能是什么错误？

Placeholder is shown in normal browsers except android 4.0 and above and the width also get reduced compared to other fields.
What could be the error?

推荐答案

这是在默认Android Webkit浏览器中发现已知错误。根据这个QuirksMode页面，您可以看到许多Android版本都遭受这种困扰。另一方面，Chrome for Android不支持。

It's a known bug in the default Android Webkit browser. As per this QuirksMode page, you can see that many versions of Android suffer from this. Chrome for Android on the other hand, doesn't.

我为此创建了一个简单的JavaScript填充（修复）。首先，阅读这个问题如何在HTML5中显示占位符的文本number-typed input ，那么如果你仍然想使用这样的占位符，结帐 my solution gist 。

I've created a simple JavaScript shim (fix) for this. First, read this question How to display placeholder's text in HTML5's number-typed input, then if you still want to use a placeholder like that, checkout my solution gist.

TL; DR;

保留您的预期标记;

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

然后在页面加载后运行这些脚本中的任何一个;

Then run either of these scripts after the page has loaded;

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

这篇关于输入类型=" number"的占位符文本不会显示在webkit ICS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！