HTML 5 input type = "number" для чисел с плавающей запятой в Chrome

Мне нужно, чтобы пользователи вводили числа с плавающей запятой, поэтому я использую следующий элемент:

<input type="number" name="my_number" placeholder="Enter number"/>

Отлично работает в Firefox, но Chrome жалуется, что число не является целым числом, когда я пытаюсь ввести десятичное число. Это проблема для моего дела. Если я ввожу атрибут step, то Chrome разрешает номер с плавающей запятой:

<input type="number" name="my_number" placeholder="Enter number" step="0.1"/>

Но тогда проблема 0,15 не может быть введена... step не соответствует моим потребностям. Спецификация W3C упоминает числа с плавающей запятой во всех атрибутах input type="number".

Как мне заставить Chrome принимать числа с плавающей запятой без атрибута step?

Ответ 1

Попробуйте <input type="number" step="any" />

У него не будет проблем с проверкой, и стрелки будут иметь шаг "1"

Проверка достоверности: когда элемент имеет шаг разрешенного значения и результат применения алгоритма для преобразования строки в число к строке, заданной значением элемента, является число, и что число, вычитаемое из базы шагов, не является целым кратным шаг допустимого значения, элемент страдает от несоответствия шагов.

Следующий элемент управления диапазоном принимает значения только в диапазоне 0..1 и позволяет 256 шагов в этом диапазоне:

<input name=opacity type=range min=0 max=1 step=0.00392156863>

следующий контроль позволяет выбрать любое время в день, с любым точность (например, тысячная точность или больше):

<input name=favtime type=time step=any>

Обычно элементы управления временем с точностью до одной минуты.

http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step

Ответ 2

Попробуйте <input type="number" step="0.01" />, если вы нацеливаете 2 десятичных знака: -).

Ответ 3

Примечание. Если вы используете AngularJS, то в дополнение к изменению значения шага вам может потребоваться установить ng-model-options="{updateOn: 'blur change'}" на вкладке html.

Причина этого заключается в том, что валидаторы работают менее часто, так как они не позволяют пользователю вводить десятичную точку. Таким образом, пользователь может ввести десятичную точку, и валидаторы вступят в силу после размытия пользователя.

Ответ 4

Попробуйте это

<input onkeypress='return event.charCode >= 48 && 
                          event.charCode <= 57 || 
                          event.charCode == 46'>