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

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

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

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

Ответы

Ответ 1

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, если только все пользователи не используют браузеры с одинаковой локальностью и не имеют одинаковых ожиданий в формате чисел.

Ответ 2

Если вам не нужны тики вверх/вниз, то вы можете помочь:

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

<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 seperator)

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

в противном случае номер для немецкого /Deutsch:

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

и стилей:

input[type=number] {
    -moz-appearance:textfield;
    -webkit-appearance: none;
    appearance: textfield;
}

Ответ 3

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

Ответ 5

У нас была та же проблема с принятием денежных значений для евро, так как <input type="number"/> не может отображать десятичный знак в евро и формат запятой.

Мы придумали решение использовать <input type="number"/> для ввода данных пользователем. После того как пользователь введет значение, мы отформатируем его и отобразим в формате евро, просто переключившись на <input type="text"/>. Это решение Javascript, потому что вам нужно условие для выбора между режимами "пользователь печатает" и "отображать пользователю".

Вот ссылка с Visuals на наше решение: Тип поля ввода "Валюта" решена проблема

Надеюсь, это поможет каким-то образом!