9

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?

caponica
  • 3,788
  • 4
  • 32
  • 48
  • see http://stackoverflow.com/questions/12514162/google-chrome-on-android-and-only-android-does-not-allow-decimal-with-type-num and read the comments. Is that the same issue? – epascarello Nov 26 '13 at 14:16
  • I seriously doubt this would make a difference, but you don't need to use `.setAttribute()` for things like "type" and "step"; they're properties directly accessible on the DOM node (as your `alert()` is coded) so you can just write `i.type = "number";` etc. – Pointy Nov 26 '13 at 14:17
  • @epascarello I had read that thread but (a) this is about apps (not Chrome per se) and (b) there were no answers posted there. That thread was also written more than a year ago so there might be something new since then. – caponica Nov 26 '13 at 14:18
  • @pointy - I know, it's just that method is suggested as a way to test browser support for various features so I used it as-written in case the `setAttribute()` bit was part of the test. – caponica Nov 26 '13 at 14:19

1 Answers1

0

Try setting the min tag to 0.0 instead of 0

<input type="number" step="0.001" min="0.0" name="foo" />
MattTheNub
  • 111
  • 1
  • 5