type=number输入框追加单数字时onchange事件监听器不生效问题

1. 原生change事件的触发条件存在限制：仅当输入框失去焦点，且当前值与上次失焦时存储的值不一致时才会触发。你修改输入框内容后如果没有执行失焦操作（比如点击页面空白处、按下回车、切换到其他输入框），事件不会触发。清空后重新输入能触发，通常是因为清空输入的过程中你主动触发了失焦行为。
2. 存在隐藏的逻辑误区：输入框的value属性默认返回字符串格式，你直接对两个字符串做大小比较，会按照字典序判断而非数值大小，比如"10" > "2"的结果为false，和预期的数值比较结果不符，很容易让你误以为事件没有触发，实际是校验逻辑执行结果不符合预期。

• 如果需要输入内容变化时实时触发校验，将监听的事件从change替换为input即可。input事件会在输入框值发生任何变更（输入、删除、粘贴等操作）时实时触发，不需要等待失焦：

  document.getElementById("funit").addEventListener("input",f1);
  document.getElementById("tunit").addEventListener("input",f1);
  

• 修复值比较的逻辑，先将输入值转为数字类型再做判断，避免字符串比较的错误：

  function f1(){
      const funit = Number(document.getElementById("funit").value);
      const tunit = Number(document.getElementById("tunit").value);
      // 仅当两个值都是有效数字时执行校验
      if(!isNaN(funit) && !isNaN(tunit)){
          if(funit > tunit){
              alert("incorrect units");
              document.getElementById("funit").value = "";
              document.getElementById("tunit").value = "";
          }
      }
  }
  

• 若后续需要通过JS代码给输入框赋值，且赋值后需要触发校验逻辑，可以在赋值完成后手动派发对应事件：

  const funitInput = document.getElementById("funit");
  funitInput.value = 6;
  // 手动触发input事件执行校验
  funitInput.dispatchEvent(new Event('input'));
  

内容的提问来源于stack exchange，提问作者user16765028