Chrome（OS X）下number输入框值变更无法稳定触发回调问题

我之前也碰到过这个头疼的问题！Chrome对<input type="number">的change事件触发逻辑确实和Firefox不一样——点击输入框自带的增减按钮时能正常触发，但手动输入数值后直接点击页面空白区域、或者用键盘输入后切换焦点，偶尔就会出现事件不触发的情况，挺影响交互体验的。

复现场景与代码确认 #

你给出的最简复现代码完全能复现这个问题：

function onChange() { 
  console.log(document.getElementById('test').value); 
  // 在Chrome中，手动输入数值后直接点页面空白处，有时候不会执行这段代码
}

<input id="test" type="number" max="99" min="9" size="2" onchange="onChange()">

问题根源 #

Chrome对number输入框的change事件触发时机有特殊判定逻辑：它要求输入框的值真正完成修改且失去焦点，但如果输入的内容在验证过程中（比如符合min/max规则但没有明确的“确认”操作），或者焦点切换的方式不符合它的判定标准，就可能跳过触发change事件。而Firefox的触发逻辑更宽松，只要值变化且失去焦点就会触发。

稳定触发的解决方案 #

根据你的业务需求不同，可以选择下面的方案：

1. 改用input事件（实时响应）

如果可以接受值每变化一次就触发（比如用户输入每个数字时都响应），input事件的兼容性和稳定性都更好，Chrome和Firefox表现完全一致：

function handleInput() {
  console.log(document.getElementById('test').value);
}

<input id="test" type="number" max="99" min="9" size="2" oninput="handleInput()">

2. 结合blur事件兜底（确认输入后触发）

如果你还是需要类似change事件的“用户确认输入后触发”逻辑，可以在blur事件中手动检查值是否变化，兜底触发处理函数：

// 保存输入框初始值
let prevValue = document.getElementById('test').value;

function handleBlur() {
  const currentValue = document.getElementById('test').value;
  // 如果值有变化，手动执行change逻辑
  if (currentValue !== prevValue) {
    onChange();
    prevValue = currentValue;
  }
}

function onChange() {
  console.log(document.getElementById('test').value);
}

<input id="test" type="number" max="99" min="9" size="2" onchange="onChange()" onblur="handleBlur()">

3. 使用addEventListener绑定事件（更稳定的绑定方式）

有时候内联的onchange属性在Chrome下会有优先级或触发时机的问题，改用addEventListener绑定事件，再结合blur手动触发change事件，能进一步提升稳定性：

const testInput = document.getElementById('test');
// 绑定change事件
testInput.addEventListener('change', onChange);
// 绑定blur事件兜底
testInput.addEventListener('blur', () => {
  if (testInput.value !== testInput.defaultValue) {
    testInput.dispatchEvent(new Event('change'));
  }
});

function onChange() {
  console.log(testInput.value);
}

<input id="test" type="number" max="99" min="9" size="2">

这些方案都能解决Chrome中change事件不稳定的问题，你可以根据自己的业务场景选择最合适的一种。

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