像这样使用纯JavaScript：

<script>
  function handleChange(input) {
    if (input.value < 0) input.value = 0;
    if (input.value > 100) input.value = 100;
  }
</script>

然后像这样声明输入框：

<input type="text" onchange="handleChange(this);" />

因为你已经把这个函数挂接到了onchange（），所以即使用户复制/粘贴了一些东西到输入框中，它也会工作。

我建议使用jQuery Validation插件。非常灵活和可扩展。要处理范围查询，请执行以下操作。它将验证您的表单中标记有“百分比”类的任何输入是否存在并落在给定的范围内。

$("#myform").validate({
  rules: {
    percentage: {
      required: true,
      range: [0, 100]
    }
  }
});

<input id="percent" name="percent" class="percentage" />

我建议使用该插件的原因是，它可以开箱即用地处理许多验证情况，减轻您为许多场景编写验证代码的责任-您可以以更好的方式花费您的创造性努力。它也被许多人使用，因此具有由大型社区改进的额外优势。

• • 更新**：此外，您可能希望考虑一种替代输入机制，例如slider（demo），它将以一种不受用户错误影响的方式约束数据-或者至少不受这种特定类型错误的影响。

HTML5 added several new input types，包括number。

<form>
  Quantity (between 1 and 100):
  <input type="number" name="quantity" min="1" max="100">
</form>

旧版浏览器不支持的新输入类型将表现为<input type="text">。
Runnable example来自W3Schools。

可以使用Math.min()和Math.max()：

const val = Math.min(100, Math.max(0, val));

有关详细信息，请参阅文档：

• Math.min
• Math.max

document.getElementById("test_id").onkeyup = function() {
  var input = parseInt(this.value);
  if (input < 0 || input > 100)
    console.log("Value should be between 0 - 100");
  return;
}

<input type="text" id="test_id" />

您只需要在每次击键之后和发送到字段之前测试字段的值（例如使用按键事件处理程序）-如果新的击键将创建太高的值，则拒绝按键。
例如，如果当前值为20，而用户试图键入第三个数字，则应通过从事件处理程序返回false来拒绝按键。基本上，您应该允许的唯一第三个字符是“0”，并且仅当当前字段值为“10”时。

通过jQuery来实现

<input type="number" name="quantity">

如果数字不在0 - 100之间，则清空输入字段

<script>
    $("input[name='quantity']").change(function() {
      number = $("input[name='quantity']").val()
       if( number <= 0 || number >= 100 ) {
           $("input[name='quantity']").val("");
           alert("0 - 100");
         }
       });
</script>

如果只是字符数不超过20（例如），则可以使用

<input type="text" name="usrname" maxlength="20" />

如果您需要处理输入字段中的一些其他情况，那么函数将是更好的选择。