如何用原生JS或JQuery实现React式受控组件/受控输入？

这个问题我之前也踩过坑！oninput事件确实是在输入框的值已经变更之后才触发的，所以你现在的代码只能在用户输入完1000之后再把它改成999，没法提前拦截第四个数字的输入。要实现类似React受控组件那种实时管控输入的效果，我们得在输入动作发生之前就做校验，比如用keydown或者beforeinput事件来拦截不符合规则的输入。

下面分别给你Vanilla JS和jQuery的实现方案：

方案一：Vanilla JS 实现受控输入（限制最大值999） #

核心思路是监听keydown事件，在用户按下按键时就预判输入后的结果会不会超过999，如果会就直接阻止这个按键的默认行为；同时还要处理粘贴的情况，防止用户直接粘贴超过限制的数值。

<input name="count" id="groupcount" type="number">
<script>
const inputEl = document.getElementById('groupcount');
const MAX_LIMIT = 999;

// 监听按键按下事件
inputEl.addEventListener('keydown', function(e) {
  // 允许一些必要的特殊按键：删除、退格、箭头键、Tab、粘贴快捷键等
  const allowedSpecialKeys = [8, 9, 13, 37, 38, 39, 40, 46];
  if (allowedSpecialKeys.includes(e.keyCode) || (e.ctrlKey && e.keyCode === 86)) {
    return;
  }

  // 计算按下按键后的预期值
  const currentValue = this.value || '0';
  const expectedValue = currentValue + e.key;
  
  // 如果预期值超过最大值，阻止输入
  if (parseInt(expectedValue) > MAX_LIMIT) {
    e.preventDefault();
  }
});

// 处理粘贴操作
inputEl.addEventListener('paste', function(e) {
  const pastedText = e.clipboardData.getData('text');
  if (parseInt(pastedText) > MAX_LIMIT) {
    e.preventDefault();
    this.value = MAX_LIMIT.toString();
  }
});
</script>

方案二：jQuery 实现受控输入（限制最大值999） #

如果项目里已经在用jQuery，用它来绑定事件会更简洁，逻辑和上面一致：

<input name="count" id="groupcount" type="number">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
const MAX_LIMIT = 999;

$('#groupcount')
  .on('keydown', function(e) {
    const allowedSpecialKeys = [8, 9, 13, 37, 38, 39, 40, 46];
    if (allowedSpecialKeys.includes(e.keyCode) || (e.ctrlKey && e.keyCode === 86)) {
      return;
    }

    const currentValue = $(this).val() || '0';
    const expectedValue = currentValue + e.key;
    
    if (parseInt(expectedValue) > MAX_LIMIT) {
      e.preventDefault();
    }
  })
  .on('paste', function(e) {
    const pastedText = e.originalEvent.clipboardData.getData('text');
    if (parseInt(pastedText) > MAX_LIMIT) {
      e.preventDefault();
      $(this).val(MAX_LIMIT.toString());
    }
  });
</script>

为什么原来的方法不行？ #

oninput事件的触发时机是输入完成、值已经更新之后，所以当用户输入第四个数字（比如1000）时，输入框已经变成1000了，你再把它改成999不仅会有视觉上的闪烁，也没法达到“在输入到100时就阻止第四个数字”的预期效果。而keydown是在按键按下、值还没更新前触发，刚好能帮我们提前拦截不符合规则的输入。

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