限制输入框为 0-100

Question

我有一个输入框，其取值范围为 0-100。我想阻止用户写任何更大或更小的东西。

我一直在使用 jquery keyfilter 插件来限制字段的输入： http://code.google.com/p/jquery-keyfilter/

这个插件可以将输入限制为数字，但不在一个范围内。如何防止用户输入超出范围的数字。谢谢。

Answer 1

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" />

Answer 2

由 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>

Answer 3

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。

Answer 4

你可以使用 Math.max 和 Math.min

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

Answer 5

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

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

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

Answer 6

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

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

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

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

更新：此外，您可能需要考虑另一种输入机制，例如 slider (demo)，它将以不受用户约束的方式约束数据错误——或者至少不是这种特殊类型的错误。

Answer 7

像这样使用纯 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()，所以即使用户将某些内容复制/粘贴到输入框中，它也会起作用。

Answer 8

您只需要在每次击键之后和将其发送到字段之前（例如使用按键事件处理程序）测试字段的值 - 如果新的按键会创建一个过高的值，则拒绝按键。

例如 - 如果当前值为 20 并且用户尝试键入第三个数字，您应该通过从事件处理程序返回 false 来拒绝按键。基本上，您应该允许的唯一第三个字符是“0”，并且仅当当前字段值为“10”时。