HTML: input type=number и разделитель дробной части

В HTML 5 было добавлено новое значение атрибута type у тега input – значение number. Значение полей с типом number валидируются браузерами, туда допускается вводить только числа (целые и дробные), а на мобильных устройствах отображается усечённая клавиатура, которая позволяет вводить только цифры.

Но есть у этого решения особенность (в некотором роде – недостаток) – разделитель дробной части браузер берёт из операционной системы. Например, если у вас ОС Windows с русским языком в качестве основного, то браузер будет считать валидным разделителем запятую, а цифры с точкой пропускать не будет. И даже javascript не сможет получить значение поля с невалидным содержимым (например, чтобы заменить точку на запятую).

Решение: необходимо сделать элемент таким:

<input type="tel" pattern="[0-9]+([\.,][0-9]+)?"/>

При этом сохранится браузерная валидация и на мобильном устройстве будет отображаться усеченная цифровая клавиатура.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *