Каково поведение при обновлении поля ввода type = number со значением replace - PullRequest
0 голосов
/ 11 декабря 2018

Во время написания калькулятора с помощью Javascript я столкнулся с различным поведением полей <input type=number> в Chrome и Firefox.

Если по какой-либо причине вы замените значение поля ввода, которое вы вводите, наего собственное значение внутри прослушивателя событий, прикрепленного к полю ввода, невозможно записать числа с десятичными знаками в поле в Firefox:

window.addEventListener("input", function(e){
    if(document.getElementById("activator").checked){
        e.target.value = e.target.value;
    }
});
<input type="number" step="0.00001">
<label>
    <input type="checkbox" id="activator">
     Activate JS value override
</label>

Интересно, предназначено ли это поведение в Firefox или, может быть, даже стандарт?Или стандарт не определен, и движок браузера определяет, что происходит со значением или как оно обрабатывается?

Редактировать: Я проверил поведение в Edge, и оно ведет себякак хром.Кроме того, я проверил его только с немецкой локалью (кроме Edge, которая, кажется, игнорирует локаль) в Chrome и FF, но, вероятно, она по-прежнему совпадает с точками в качестве десятичных разделителей.

Edit2: Обновлена ​​скрипта, чтобы показать, что проблема не связана с атрибутом "step".

1 Ответ

0 голосов
/ 11 декабря 2018

Представьте, что вы вводите 3.5.

Причина будет в том, что в момент ввода десятичного разделителя . также будет запускаться ваш слушатель, который попытается установить недопустимое значение "3.".Так или иначе, в Chrome есть обходной путь для этой проблемы: установка значения invalid вручную в Chrome также не работает:

window.addEventListener("input", function(e) {
  if (document.getElementById("activator").checked) {
    e.target.value = e.target.value;
  }
})

foo.addEventListener('click', () => {
  numberinput.value = "3.";
})
<input type="number" step="0.00001" id="numberinput">
<label>
    <input type="checkbox" id="activator">
     Activate JS value override
</label>
<button type="button" id="foo">Set 3. as value</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...