我有一个输入框,从0-100取值。 我想阻止用户写任何东西或大或小。
我一直在使用jQuery插件keyfilter限制字段输入: http://code.google.com/p/jquery-keyfilter/
这个插件可以将输入限制到数字,而不是一个范围内。 如何防止用户输入将超出范围的数字。 谢谢。
我有一个输入框,从0-100取值。 我想阻止用户写任何东西或大或小。
我一直在使用jQuery插件keyfilter限制字段输入: http://code.google.com/p/jquery-keyfilter/
这个插件可以将输入限制到数字,而不是一个范围内。 如何防止用户输入将超出范围的数字。 谢谢。
使用普通的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 验证插件。 非常灵活和可扩展的。 为了处理您的查询范围以下。 它将valied在你的形式打上了“百分比”类中的任何输入的情况下,并在给定的范围内下降。
$("#myform").validate({
rules: {
percentage: {
required: true,
range: [0, 100]
}
}
});
<input id="percent" name="percent" class="percentage" />
我建议使用这个插件的原因是它处理了许多验证的情况下开箱,减轻你的责任来写验证代码在很多场景 - 你可以花费你的创造性努力用更好的方式。 它也被许多人,因此有一个大社区正在改善的额外优势。
更新 :此外,你可能要考虑一个替代的投入机制,如滑块 ( 演示 ),这将在某种程度上不受用户错误约束的数据-或者至少不是这种特定类型的错误。
HTML5增加了一些新的输入类型 ,包括number
。
<form>
Quantity (between 1 and 100):
<input type="number" name="quantity" min="1" max="100">
</form>
不受旧的Web浏览器支持新的输入类型,将表现为<input type="text">
Runnable接口例如从W3Schools的。
您可以使用Math.max和Math.min
val = Math.min(100,Math.max(0,val));
<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>
你只需要在每次键击后测试字段的值,并在它发送到字段(例如与按键事件处理程序) - 如果新的按键会产生过高的值,则拒绝按键。
例如 - 如果当前值是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" />
如果您需要处理一些其他的情况下在输入字段,那么功能将是一个更好的选择。