监听数字输入变化应使用 input 事件，并在回调中通过 event.target.value 获取最新值。由于 type="number" 的输入框在用户删除内容或输入非法字符时可能返回空字符串，建议在处理逻辑中加入对空值的判断，确保程序能正确应对非数字状态。
如何区分键盘输入与程序赋值
要区分是用户手动输入还是代码修改了值，可以结合 input 事件和 change 事件。 input 事件在每次按键后触发，而 change 事件通常在输入框失去焦点且值发生改变时触发。若需精确捕捉每一次击键，仅依赖 input 即可；若只需关注最终确认的值，可使用 change。两者结合可覆盖大部分交互场景。
<input type="number" id="numInput">
<script>
const input = document.getElementById('numInput');
input.addEventListener('input', (e) => {
console.log('Input event:', e.target.value);
});
input.addEventListener('change', (e) => {
console.log('Change event:', e.target.value);
});
</script>
如何处理非数字或空值情况
当用户在 type="number" 输入框中删除所有字符时， value 属性会变为空字符串 "" ，而非 null 或 undefined 。此时若直接进行数学运算，可能会得到 NaN 。因此，在业务逻辑中应先检查值是否为空，或使用 Number() 转换并验证结果的有效性，以避免后续计算出错。
立即学习“Java免费学习笔记（深入）”；
<input type="number" id="safeInput">
<script>
const safeInput = document.getElementById('safeInput');
safeInput.addEventListener('input', (e) => {
const val = e.target.value;
if (val === '') {
console.log('Value is empty');
return;
}
const num = Number(val);
if (isNaN(num)) {
console.log('Invalid number');
} else {
console.log('Valid number:', num);
}
});
</script> 
