如何通过事件监听器判断数字输入框值的增减？

嘿，这个问题我之前也碰到过！确实原生的input事件对象里没有直接标识值增减的属性，不过咱们可以用元素自定义属性来绕开全局变量的问题，完美适配你的比例锁定需求。

核心思路 #

不用全局变量，而是把输入框的上一次值存在它自己的自定义属性里——这样既不会污染全局作用域，每个输入框还能独立维护自己的历史状态。

具体实现代码 #

// 先给输入框初始化上一次的值，用dataset存储自定义属性
dataIntepretor.dataset.prevValue = dataIntepretor.value;

dataIntepretor.oninput = function(event) {
  const inputEl = event.target;
  // 把值转成数字，避免字符串比较的坑
  const currentValue = parseFloat(inputEl.value);
  const prevValue = parseFloat(inputEl.dataset.prevValue);

  // 处理非数字输入的情况（比如用户手动输入字母）
  if (isNaN(currentValue)) {
    console.log('请输入有效数字');
    // 可以选择重置回上一次有效值
    inputEl.value = prevValue;
    return;
  }

  // 判断增减趋势
  let trend;
  if (currentValue > prevValue) {
    trend = 'increase';
    // 这里写入值增加时的比例锁定逻辑
    console.log('输入值正在增加');
  } else if (currentValue < prevValue) {
    trend = 'decrease';
    // 这里写入值减少时的比例锁定逻辑
    console.log('输入值正在减少');
  } else {
    trend = 'no-change';
    console.log('输入值没有变化');
  }

  // 更新自定义属性，为下一次判断准备
  inputEl.dataset.prevValue = currentValue;
};

额外说明 #

• 用dataset存储的属性会自动映射到元素的data-*属性，比如dataset.prevValue对应HTML里的data-prev-value，完全符合DOM规范。
• 处理了非数字输入的边界情况，避免后续逻辑出错。
• 如果是多个数字输入框，每个都能独立维护自己的历史值，互不干扰。

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