<input type="text"/> 的最大允许值答案

【问题标题】：Maximum allowed value for <input type="text"/><input type="text"/> 的最大允许值
【发布时间】：2013-04-06 08:25:45
【问题描述】：

我有这个输入字段：

<input type="text"/>

如何只允许输入一个不大于某个预定义值的数字，例如 10，这样就不允许每次尝试输入大于 10 的数字？

【问题讨论】：

text 没有内置任何内容，因为它的目的是文本。不过有type="number"。
您可以控制和更改 html 元素的值并使用 Javascript 通知人们。搜索验证。

标签： javascript html

【解决方案1】：

这就是我在项目中使用此属性的方式。

<script>
function integerInRange(value, min, max, name) {

    if(value < min || value > max)
    {
        document.getElementById(name).value = "100";
        alert("Write here your message");
    }
}
</script>

我的输入是这样的

<input type="text" id="yyy" name="xxx" onkeyup="integerInRange(this.value, 0, 100, "yyy")" />

如果您使用引导程序，您可以使用警报窗口！ function 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();
    }
}

【讨论】：

【解决方案2】：

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

<input type="number" min="0" max="10"></input>

我还没有测试过，但我认为它应该可以工作。

【讨论】：

我认为 OP 希望输入为“文本”类型。但是是的，如果用户不手动输入数字，这将有效。
@drTerminal HTML5 有一个数字输入类型，所以我认为它更合适。不过，这只是一个很小的变化。
这个也试过了，但是什么也没有发生，我是不是错过了什么？我把 javascript 放在和我把但什么都没有，我仍然可以请输入一个大于 10 的数字。
@NikolaNastevski 确保脚本在 HTML 元素被解析后触发（即将<script> 元素放在 <input> 元素之后。
@Bart：我的错，没注意那个，抱歉 :) 似乎有效，谢谢 ;) 任何可以验证它是否是数字的机会，所以如果它不是号码，不允许输入？

【解决方案3】：

立即将值转换为数字，然后将其与最大值进行比较：

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;
    }
}

演示： http://jsfiddle.net/jBFHn/

在您键入时，如果该值不是数字或该值大于最大值，则会将“输入错误”class 添加到元素中。你可以把整个class的变化拿出来，放进你自己的东西。

【讨论】：