Как в input с типом number при вставке значение 10.1 сделать, чтобы точка изменялась на запятую?

Question

[Михаил Гаврилюк]

Создал input c типом number:
<input type="number">

Если я вставляю таким образом, то точка в input заменяется автоматически на запятую.

document.getElementsByTagName("input")[0].value = 10.1;

Но если я пытаюсь сначала получить значение, а потом вставить, то уже вставляется с точкой.

var text = document.getElementsByTagName("input")[0];
var val = text.value;
document.getElementsByTagName("input")[0].value = Number(val);

Comments

[Александр]

(10.1).toLocaleString('ru-RU'); // 10,1

[Михаил Гаврилюк]

Александр, в консоли работает) а на практике нет при вставке в input, получаемого значение из этого же поля

[Александр]

Михаил Гаврилюк, parseFloat(input.value); // 10.1

[Михаил Гаврилюк]

Александр, parseFloat не работает в данном случае), т.к. значение не валидно

Answer 1

[Rsa97]

Добавьте атрибут lang="ru-RU".
И да, по умолчанию step=1, то есть значение 10.1 для данного поля будет некорректным, надо добавить step="0.1"

Comments

[Михаил Гаврилюк]

у меня установлено lang="ru-RU" и установка шага никак не повлияла. При вставке также остается точка .

[Rsa97]

Михаил Гаврилюк, В каком именно браузере? У меня в Firefox и Chrome работает нормально

[Михаил Гаврилюк]

А вы пробовали вставить 10.1 ? При этом точка сохраняется.

Я понимаю, что если использовать стрелки, то они дают запятые, но мне нужно например скопировать 10.1 и вставить чтобы оно стало 10,1.

[Rsa97]

Михаил Гаврилюк, Если из буфера обмена, то да, сохраняется.
Значит повесьте событие на blur, по которому будете форматировать текст.

[Михаил Гаврилюк]

Rsa97, Так blur срабатывает при потере фокуса, а мне нужно при вставке или когда пользователь вручную набирает 10.1 и у него находу меняется точка на запятую

[Rsa97]

Михаил Гаврилюк, На ходу не получится. Если пользователь нажал точку, то в этот момент значение инпута становится невалидным и value == "".
Так что вам остаётся только писать свой кастомный input, который будет себя вести именно так, как вы хотите.
P.S. Я поправил codepen выше, можете посмотреть как меняется value при наборе числа.

Answer 2

[Владимир Коротенко]

Все зависит от локали. Я бы вам рекомендовал валидировать перед отправкой.

Comments

[Михаил Гаврилюк]

Локаль "ru-RU". Каким образом валидировать ?