Chrome auto formats input=number

Question

I have a web application where I\'m specifying an input field to be a number using the HTML5 property type=\"number\".

Answer 1

There are a couple of extra properties that you can check including valueAsNumber.

Chrome attempts to provide you with the best input method possible based on the input type. In this case, number also has some extra abilities such as toggle up and down.

The point of this, is if the number isn't valid, you will be able to detect that there are errors and also set the styling input[type=number]:invalid { background-color: red; }

Answer 2

Try this:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('[type=number]').attr('type', 'text').attr('pattern', '[0-9]*');
}