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

Question

I have the following input field

Placeholder is shown in normal

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;

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