禁用的输入在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;
  }
}

总的来说，当您按下增加按钮时，该值将在您向上按下之前增加。

在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的相当奇怪的行为。 在输入重置mouseup事件之前，会触发input.disabled。 因此，我在chrome和firefox中工作的解决方案是：

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

在这里尝试： https://codepen.io/anon/pen/MdqOjM