2

I need to create a form for a mobile website in which people can enter a number with a decimal mark like 5.3.

In order to make it easier for the visitors to enter the numbers, I want to force the smartphone to display the on-screen keyboard with the characters the user is most likely to enter.

It's possible to show the numbers on-screen keyboard by adding the HTML5 type="number" input type.

Unfortunately Google Chrome then starts to validate the input and allows only intergers to be entered. So the user has a numbers on screen keyboard but cannot enter the number he needs to enter.

How can I display the numbers on-screen keyboard and still allow people who view the website with Google Chrome to enter numbers with decimal marks?

Sandra
  • 765
  • 3
  • 10
  • 20

1 Answers1

4

Create the field as follows: 

<input type="number" step="0.1" />

This'll allow Chrome to validate correctly and not interfere. By default if you don't provide a step value it's 1, but it can be any positive floating value.

Tested in Chrome 10,12 with HTML5 and XHTML doctypes (both work). Example HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <form>
            <input type="number" step="0.1" />
        </form>
    </body>
<!-- doctypes
html5: <!DOCTYPE html>
html4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
xtml: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
</html>
Rudu
  • 15,682
  • 4
  • 47
  • 63
  • A down-vote because of your personal case? This works in the versions of chrome I currently have, it's to HTML5 spec, and it's a feature [reported by google](http://www.chromium.org/developers/web-platform-status/forms)... you may perhaps need to use the HTML5 doctype (` `) (instead of XHTML, or HTML4) – Rudu Sep 14 '11 at 16:59
  • It did seem a bit harsh to me too, but as far as I understood, that is what you do. Anyway, thanks for updating your answer, I have marked it as helpful now, also I have investigated further - seems that if you have step="0.1" and value="0.99" value validation kicks in when you submit, so you need at least as many numbers after the decimal point in the value as the step - thing is in my case I don't want step at all, I don't want validation, I do want the numeric keyboard – Anthony Johnston Sep 15 '11 at 11:58