Отключенный ввод работает неправильно в Firefox

Question

У меня есть вход, который отключается, когда реализуется какое-то условие.Например, у меня есть ввод со значением по умолчанию 20.

<input type='number' id='main' value='20'>

И я добавил к следующему событию oninput код:

var input=document.getElementById('main');
input.oninput=function(){
  if(input.value>20){
  input.disabled=true;
  }
}

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

В Chrome значение останавливается на 21, как и ожидалось.

Попробуйте здесь: https://jsfiddle.net/u0obL5h2/3/

Answer 1

Измените свою функцию для прослушивания onChange вместо onInput

Answer 2

Используйте «onchange» вместо «oninput».Надеюсь, это поможет.

var input=document.getElementById('main');
input.onchange=function(){
  if(input.value>20){
  input.disabled=true;
  }
}

Answer 3

Довольно странное поведение от Firefox, я думаю. input.disabled срабатывает до того, как ввод сбрасывает событие mouseup. Итак, мое решение, которое работает в Chrome и Firefox, это:

var input=document.getElementById('main');
input.onmouseup = function() {
  if(input.value>20){
    input.disabled=true;
  }
}

Попробуйте здесь: https://codepen.io/anon/pen/MdqOjM