javascript 限制用户将值放在 html 输入的范围内（类型 = 数字）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25825843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Restrict user to put value in range in html input (type = number)
提问by Jukka K. Korpela
How can I stop user from adding number greater than max value and smaller then min value in html input(type = number)
如何阻止用户在 html 输入（类型 = 数字）中添加大于最大值且小于最小值的数字
<input id="ageRange" type="number" min=20 max= 50 maxlength=2></input>
I tried one javascript code, but it makes change after we add the value then it changes the value. Is there any way that I can stop user to put value in range or just there is no flickering in the input cell while we change value programatically?
我尝试了一个 javascript 代码，但是在我们添加值后它会发生变化，然后它会改变值。有什么方法可以阻止用户将值放入范围内，或者在我们以编程方式更改值时输入单元格中没有闪烁？
回答by Jukka K. Korpela
You would need handle input at a low level and perform your own checks. To prevent the user from typing value larger than the maximum, you could handle the keypressevent and then check the input character and whether it would make the value too large:
您需要在低级别处理输入并执行您自己的检查。为了防止用户输入大于最大值的值，您可以处理该keypress事件，然后检查输入的字符以及它是否会使值过大：
<input id="ageRange" type="number" min=20 max= 50 maxlength=2>
<script>
document.getElementById('ageRange').onkeypress =
function (e) {
var ev = e || window.event;
if(ev.charCode < 48 || ev.charCode > 57) {
return false; // not a digit
} else if(this.value * 10 + ev.charCode - 48 > this.max) {
return false;
} else {
return true;
}
}
</script>
This does prevent the user from inserting a larger value by pasting.
这确实可以防止用户通过粘贴插入更大的值。
To prevent the user from deleting characters so that the value becomes too small, you would need to handle the rubout key, which is more problematic due to keyboard differences. But it would be poor usability. Suppose the user typed 30, then realized he meant to type 40. A code that prevents changing the value to too small would prevent removing either digit!
为了防止用户删除字符使值变得太小，您需要处理 rubout 键，由于键盘差异，这更成问题。但它的可用性会很差。假设用户键入 30，然后意识到他想键入 40。防止将值更改为太小的代码将防止删除任何一个数字！
Browsers are expected to have their own user interface for <input type=number>, and this is the reason for using it. The interface is not meant to prevent the user from typing too large values but to detect them and report them so that the user can correct them. Before trying to substantially modify this, consider the potential confusion. If you do add code that prevents out-of-ranfe values, browsers will not show diagnostic messages (e.g. “Number must be less than or equal to 50”), as they do by default if they support <input type=number>, so your JavaScript code should probably issue its own diagnostics.
浏览器应该有自己的用户界面<input type=number>，这就是使用它的原因。该界面并不是为了防止用户输入太大的值，而是为了检测它们并报告它们，以便用户可以更正它们。在尝试对其进行实质性修改之前，请考虑潜在的混淆。如果您确实添加了防止超出范围值的代码，浏览器将不会显示诊断消息（例如“数字必须小于或等于 50”），因为它们默认情况下支持<input type=number>，因此您的 JavaScript 代码可能应该发出自己的诊断。
回答by Ben Crowhurst
Have a read of the input elementdocumentation.
阅读输入元素文档。
alternatively:
或者：
Have a read of HTML5 Constraint Validation
<input id="age" pattern="[0-9]" value="9" />
<script>
document.getElementById('age').validity.patternMismatch;
</script>
And then take a read of Regex numeric range matching
然后阅读Regex 数字范围匹配
回答by Masoud
Try this:
试试这个：
var max = 100;
$('input').keyup(function(){
var inputValue = $(this).val();
if(inputValue > max){
alert('greater!');
$(this).val('')
}
})
})
here is jsfiddle: http://jsfiddle.net/h07Lc0Ld/1/
这是 jsfiddle：http: //jsfiddle.net/h07Lc0Ld/1/
回答by Perlica
Set value to min...
将值设置为最小...
<form>
<input id="ageRange" type="number" min="20" max="50" value="20"></input>
</form>
