Локализация номера типа ввода

Я работаю над веб-приложением, запущенным в Chrome, где у меня есть входные данные с типом number, В моей локали запятые используются для десятичных чисел, а пробел используется для разделения тысяч (это не так важно), но когда я ввожу эти символы в числовое поле, они просто удаляются, эффективно увеличивая денежные суммы на сотню.

Я установил язык как в настройках браузера, так и на странице, но мне все еще нужно использовать точку для десятичных дробей. Можно ли как-то настроить поле для приема запятых?

В качестве альтернативы, мне придется решить эту проблему с помощью JavaScript. Я думаю, я мог бы обработать событие keydown и изменить запятые на точки по мере того, как пользователь вводит данные, но это не дало бы хорошего пользовательского опыта, не так ли? Итак, как я могу добиться этого с минимальными затратами в моем коде?

Источник

5 ответов

HTML5 input type=number неадекватен с точки зрения локализации, как из-за определения, так и из-за реализаций. Он предназначен для локализации, но в соответствии с языком браузера, который вы не можете установить или даже знать как дизайнер / автор.

На моем Chrome input type=number step=0.001 принимает 1,2 (с запятой) и отправляет его как 1,2, а также принимает 1.200 (с точкой), визуально преобразовывая его в 1200 и отправляя как таковой. Именно так и должно быть, более или менее, когда локаль браузера - финская. Но он не принимает 1 200 (что является стандартным способом написания 1200 на финском языке) и вместо этого отправляет только цифру 1.

Так что это довольно безнадежно. Используйте любые виджеты JavaScript, которые вы можете найти, или простое поле ввода текста. Все, вероятно, лучше, чем input type=number если все пользователи не используют браузеры с одинаковым языковым стандартом и не имеют одинаковых ожиданий в отношении формата чисел.

Источник

Если вам не нужны тики вверх / вниз, тогда следуйте обходному пути:

только для немецкой запятой (,):

<input type="text" pattern="[0-9]+([,][0-9]{1,2})?" name="amount">

только точка (.):

<input type="text" pattern="[0-9]+([\.][0-9]{1,2})?" name="amount">

и то и другое, но не вместе: (не 1000 разделитель)

<input type="text" pattern="[0-9]+([\.|,][0-9]{1,2})?" name="amount">

иначе номер для немецкого / немецкого:

<input name="myinput" value="0" step="0.01" lang="de-DE" type="number">

и стиль с помощью:

input[type=number] {
    -moz-appearance:textfield;
    -webkit-appearance: none;
    appearance: textfield;
}
Источник

Спецификация ясна: в качестве десятичного разделителя допускается только точка. Это до браузеров, чтобы обеспечить поддержку локализации для форм. Тысячи разделителей не допускаются.

Источник

К сожалению, эти символы не допускаются в <input type="number">

Смотрите спецификации здесь: http://w3c.github.io/html-reference/datatypes.html

Вы хотите этот формат? http://jsfiddle.net/S8rqY/

Источник

В то время как Chrome использует настройку браузера, Firefox нет. По крайней мере, не всегда - например, когда есть атрибут lang в <html> тег, Firefox использует это.

Однако вы можете передать атрибут lang также в <input>пометить напрямую. Комбинируя это с API-интерфейсом Navigator, можно имитировать поведение хрома.

Минимальный пример в React:

      <input
  type="number"
  lang={navigator.language}
/>
Источник
Другие вопросы по тегам