Placeholder text for an input type="number" does not show in webkit ICS

Question

I have the following input field

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

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?

Answer 1

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.

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;

Leave your markup as you would expect;

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

Answer 2

By using type = "tel' instead of type = "number" the placeholder is displayed and the numeric keyboard is opened on focus.