JavaScript实现风扇调速控件禁止输入小于前次值的数值

要实现「禁止用户输入小于上一次输入值」的限制，核心逻辑是给每组转速控件单独记录上一次的合法有效值，每次用户修改值（不管是拖滑块还是输数字）时做校验：如果新值小于上次的合法值，就把控件回退到上次的有效值；如果新值合法，就同步两个关联控件的值，同时更新记录的合法值。

下面是可直接替换运行的完整代码：

JavaScript 代码 #

// 通用绑定函数，复用三组控件的联动+校验逻辑，减少重复代码
function bindFanSpeedControl(rangeId, numId) {
  const rangeEl = document.getElementById(rangeId);
  const numEl = document.getElementById(numId);
  // 初始化上一次合法值为控件默认值
  let lastValidValue = Number(rangeEl.value);

  // 统一的值校验、同步方法
  function syncValue(newVal) {
    const currentVal = Number(newVal);
    // 新值小于上次合法值，直接回退
    if (currentVal < lastValidValue) {
      rangeEl.value = lastValidValue;
      numEl.value = lastValidValue;
      return;
    }
    // 新值合法，同步双控件+更新记录值
    rangeEl.value = currentVal;
    numEl.value = currentVal;
    lastValidValue = currentVal;
  }

  rangeEl.addEventListener('input', e => syncValue(e.target.value));
  numEl.addEventListener('input', e => syncValue(e.target.value));
}

// 绑定三组风扇转速控件
bindFanSpeedControl('range3', 'num3');
bindFanSpeedControl('range4', 'num4');
bindFanSpeedControl('range5', 'num5');

function execute(){                            
  document.getElementById("result").textContent = `${num3.value} ${num4.value} ${num5.value}`;
}

HTML 代码 #

原有HTML代码不需要做任何修改，直接沿用即可：

<input id="range3"  type="range" min="0" max="100" value="0" />
<input id="num3" min="0" max="100" type="number" value="0" />

<input id="range4"  type="range" min="0" max="100" value="0" />
<input id="num4" min="0" max="100" type="number" value="0" />

<input id="range5"  type="range" min="0" max="100" value="0" />
<input id="num5" min="0" max="100" type="number" value="0" />

<button onclick="execute()">Click</button>
<p id="result"></p> 

补充说明 #

• 结果输出处用textContent替代了原代码的innerHTML，纯文本场景下这个API安全性更高，不会有XSS注入风险，性能也更好
• 校验逻辑覆盖所有值修改场景：不管是拖动range滑块、还是在number输入框里手动敲数字，只要输入值比上一次的合法值小，都会立刻被拦截并回退
• 当前逻辑严格遵循限制要求：转速一旦调高，用户无法手动调低。如果后续需要增加重置为0的功能，只需要给对应组增加重置逻辑，重置时把组内记录的lastValidValue设为0，再同步两个控件的值即可
• 抽通用绑定函数只是为了减少重复代码，如果你想保留原来逐组写事件监听的结构，只需要在每组代码里单独声明存储lastValidValue的变量，在事件回调里加上相同的校验判断即可，核心逻辑没有区别

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