如何检测number类型输入框的值是递增还是递减？

没问题！我来给你两种实用的方案，不管用jQuery还是原生JS都能轻松实现判断number输入框值的增减~

jQuery 方案 #

思路很简单：我们把输入框的上一次值存在元素的自定义数据属性里，每次值变化时拿当前值和旧值对比，就能判断是递增还是递减了。

// 初始化：给number输入框设置初始旧值
$('input[type="number"]').each(function() {
  // 把初始值转成数字存到data属性里
  $(this).data('oldValue', parseFloat($(this).val()) || 0);
});

// 绑定输入事件（input事件实时响应，change事件仅失去焦点时触发，按需选择）
$('input[type="number"]').on('input change', function() {
  const $input = $(this);
  const currentValue = parseFloat($input.val()) || 0;
  const oldValue = $input.data('oldValue');

  // 判断增减
  if (currentValue > oldValue) {
    console.log('值递增了！');
    // 这里写递增时要执行的操作
  } else if (currentValue < oldValue) {
    console.log('值递减了！');
    // 这里写递减时要执行的操作
  }
  // 相等的情况可以按需处理

  // 更新旧值，为下一次判断做准备
  $input.data('oldValue', currentValue);
});

原生 JavaScript 方案 #

如果不想依赖jQuery，原生JS的实现逻辑完全一致，只是用原生API来操作元素和存储数据：

// 获取所有number类型输入框
const numberInputs = document.querySelectorAll('input[type="number"]');

// 初始化旧值
numberInputs.forEach(input => {
  // 用dataset存储旧值，等价于jQuery的data()
  input.dataset.oldValue = parseFloat(input.value) || 0;
});

// 绑定事件处理函数
function handleInputChange(e) {
  const input = e.target;
  const currentValue = parseFloat(input.value) || 0;
  const oldValue = parseFloat(input.dataset.oldValue);

  if (currentValue > oldValue) {
    console.log('值递增了！');
    // 递增操作
  } else if (currentValue < oldValue) {
    console.log('值递减了！');
    // 递减操作
  }

  // 更新旧值
  input.dataset.oldValue = currentValue;
}

// 给每个输入框绑定input和change事件
numberInputs.forEach(input => {
  input.addEventListener('input', handleInputChange);
  input.addEventListener('change', handleInputChange);
});

额外注意点 #

• 优先用input事件：它能实时响应所有输入方式（手动打字、点击上下箭头、滚轮调整、粘贴内容），而change事件只有在输入框失去焦点时才触发，体验上差一些。
• 数字转换：一定要用parseFloat或parseInt把输入值转成数字，不然字符串对比会出问题（比如"10"和"2"字符串对比会认为"10"更小）。
• 空值处理：如果用户清空输入框，我们用|| 0把空值转成0，避免出现NaN影响判断。

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