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" />

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?

Answers


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

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


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 :)


try this:

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

Need Your Help

How to handle fields enclosed within quotes(CSV) in importing data from S3 into DynamoDB using EMR/Hive

amazon-web-services amazon-s3 hive amazon-dynamodb amazon-emr

I am trying to use EMR/Hive to import data from S3 into DynamoDB. My CSV file has fields which are enclosed within double quotes and separated by comma.

How to create roles and add users to roles in ASP.NET MVC Web API

asp.net-web-api roles asp.net-identity

I have a .NET Web API project that users the individual accounts. I can register users fine using the standard template AccountController. However, I now want to set up roles and add users to roles