17

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

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

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

4

8 回答 8

42

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

于 2009-09-05T19:30:38.940 回答
11

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

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

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

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

更新：此外，您可能需要考虑另一种输入机制，例如滑块( demo )，它将以不受用户错误影响的方式约束数据 - 或者至少不会出现这种特定类型的错误。

于 2009-09-05T20:15:52.483 回答
9

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

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

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

来自 W3Schools 的可运行示例。

于 2017-12-01T18:57:08.320 回答
5

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

val = Math.min(100,Math.max(0,val));
于 2015-03-17T10:26:31.340 回答
2 

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

于 2009-09-05T19:42:34.057 回答
1

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

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

于 2009-09-05T19:25:55.277 回答
0

通过 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>
于 2018-10-17T03:34:49.173 回答
-3

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

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

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

于 2012-05-11T18:47:01.403 回答