Home » Android » javascript – No decimal place in HTML5 number input on some Android devices / Chrome

javascript – No decimal place in HTML5 number input on some Android devices / Chrome

Posted by: admin June 15, 2020 Leave a comment

Questions:

On some Android devices creating an HTML5 number input field does not show any decimal place.

<input type="number" step="0.001" min="0" name="foo" />

This is troublesome since I’m trying to write an HTML5 + Javascript app. It works on IOS at the moment as well as some (most?) Android devices. It’s just that some Android versions/brands do not show the decimal place on the number keyboard that pops up.

E.g. On a Galaxy S3 the app itself works fine, but if the same code is opened in Chrome you get no decimal point. I’m using this combination to test and try to work around the bug.

Here’s the question – is there any way to use Javascript to DETECT that the keyboard is not going to show a decimal point? In those circumstances I can then programmatically change the number type to text, but I only want to do this for devices that it’s necessary on.

(Alternatively, is there any way to force the decimal point to appear on the keyboard? My research so far has indicated that there is not, which is why I’m asking about the workaround instead.)

I’ve tried using various steps (any, 0.1, etc), setting patterns, setting a starter value to a decimal (value="0.1") all to no avail.

I’ve tried detecting that the browser can handle number fields, but this reports back as ‘true’… the devices CAN handle number fields, they just handle them badly:

var i = document.createElement("input");
i.setAttribute("type", "number");
i.setAttribute("step", "0.001");
alert(i.type + ' and ' + i.step); // gives "number and 0.001", so the device has stored the values and claims to support them

I’m not sure what to try next… any ideas from the community?

How to&Answers:

Try setting the min tag to 0.0 instead of 0

<input type="number" step="0.001" min="0.0" name="foo" />