Question

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

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

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

Answer 1

使用像这样的普通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 2

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

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

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

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

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

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

来自W3Schools的

Runnable example。

Answer 4

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

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

Answer 5

<input type="text" id="test_id" />
<script>
document.getElementById("test_id").onkeyup=function(){
    var input=parseInt(this.value);
    if(input<0 || input>100)
    alert("Value should be between 0 - 100");
    return;
}    
</script>

Answer 6

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

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

Answer 7

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 8

如果仅用于不超过20的字符数（例如），则可以使用

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

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

将输入框限制为0-100

8 个答案: