将输入框限制为0-100

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

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

更新:此外,您可能需要考虑一种替代输入机制,例如滑块(演示),它将以不受用户错误影响的方式约束数据 - 或者至少不是这种特定类型的错误.

Answer 3

HTML5添加了几种新的输入类型,包括number.

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

旧版Web浏览器不支持的新输入类型将表现为<input type="text">.

来自W3Schools的Runnable示例.

Answer 4

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

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