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;

<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

try this:

<input type="text" pattern="[0-9]" id="zip-code" placeholder="Zip code">

Answer 3

I had the same problem and my solution was setting the 'type' field as text. I think it happens because of the type property. Your placeholder text is not a number! If you have to force user to use only number format, you may use javascript plugins for this and i did it like that :)

Answer 4

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