javascript <input type="text"/> 的最大允许值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15994576/
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
Maximum allowed value for <input type="text"/>
提问by Nikola Nastevski
I have this input field:
我有这个输入字段：
<input type="text"/>
How can I allow entering only a number that is not greater than some predefined value, like for example 10, so every attempt to enter a number greater than 10 won't be allowed?
如何只允许输入不大于某个预定义值的数字，例如 10，因此不允许每次尝试输入大于 10 的数字？
回答by Bart
Javascript
Javascript
function createValidator(element) {
return function() {
var min = parseInt(element.getAttribute("min")) || 0;
var max = parseInt(element.getAttribute("max")) || 0;
var value = parseInt(element.value) || min;
element.value = value; // make sure we got an int
if (value < min) element.value = min;
if (value > max) element.value = max;
}
}
var elm = document.body.querySelector("input[type=number]");
elm.onkeyup = createValidator(elm);
HTML
HTML
<input type="number" min="0" max="10"></input>
I haven't tested it, but I think it should work.
我还没有测试过，但我认为它应该可以工作。
回答by Ian
Convert the value to a number immediately, then compare it to a maximum value:
立即将值转换为数字，然后将其与最大值进行比较：
window.onload = function () {
var textbox = document.getElementById("text1");
var maxVal = 10;
addEvent(textbox, "keyup", function () {
var thisVal = +this.value;
this.className = this.className.replace(" input-error ", "");
if (isNaN(thisVal) || thisVal > maxVal) {
this.className += " input-error ";
// Invalid input
}
});
};
function addEvent(element, event, callback) {
if (element.addEventListener) {
element.addEventListener(event, callback, false);
} else if (element.attachEvent) {
element.attachEvent("on" + event, callback);
} else {
element["on" + event] = callback;
}
}
DEMO:http://jsfiddle.net/jBFHn/
演示：http : //jsfiddle.net/jBFHn/
As you type, if the value isn't a number or the value is greater than the maximum, the "input-error" classis added to the element. You can take out the whole classchanging, and put in your own stuff.
在您键入时，如果该值不是数字或该值大于最大值，则将“输入错误”class添加到元素中。你可以把整个class更衣拿出来，放进你自己的东西。
回答by ?smail Hakk? ?en
This is how I used this property in my project.
这就是我在项目中使用此属性的方式。
<script>
function integerInRange(value, min, max, name) {
if(value < min || value > max)
{
document.getElementById(name).value = "100";
alert("Write here your message");
}
}
</script>
And my input like this
我的输入是这样的
<input type="text" id="yyy" name="xxx" onkeyup="integerInRange(this.value, 0, 100, "yyy")" />
If you using bootstrap you can use alert window! function integerInRange(value, min, max, name) {
如果您使用引导程序，您可以使用警报窗口！函数 integerInRange(value, min, max, name) {
if(value < min || value > max)
{
document.getElementById(name).value = "100";
$.pnotify({ title: 'UYARI', text: 'Girilen de?er ' + min + ' ile ' + max + ' aras?nda olmal?d?r.', type: 'error' });
$(".ui-pnotify-history-container").remove();
}
}
