<input type="text"/>的最大允许值是多少？

Question

我有一个输入框:

<input type="text"/>

我该如何允许只输入不大于某个预设值的数字，例如10，这样每次尝试输入大于10的数字都将被禁止？

- Nikola Nastevski

---

text 没有内置的功能，因为它的目的是文本。但是 type="number" 有内置的功能。 - Esailija

您可以使用Javascript控制和更改HTML元素的值，并通知用户。搜索验证。 - alioguzhan

Answer 1

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>

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

- Bart

---

我也尝试了这个方法，但是没有任何反应，我错过了什么吗？我将JavaScript代码放在<script type="text/javascript"></script>中，并且我使用了<input type="number" min="0" max="10"></input>，但是仍然可以输入大于10的数字。 - Nikola Nastevski

@NikolaNastevski 确保脚本在HTML元素解析后触发（即将<script>元素放在<input>元素之后）。 - Bart

@Bart：我的错，没有注意到那个，抱歉 :) 看起来可以工作，谢谢 ;) 有没有可能验证它是否为数字，如果不是数字，则不允许输入？ - Nikola Nastevski

@NikolaNastevski 更新了我的帖子 - 输入现在始终为数字，并默认为“min”。 - Bart

@Bart：我认为我们有一个获胜者 :) 谢谢 ;) - Nikola Nastevski

Answer 2

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

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/

在您输入内容时，如果该值不是数字或者超过了最大值，那么 “input-error” 类将会被添加到该元素中。您可以删除整个类更改，并加入您自己的内容。

- Ian

Answer 3

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

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

如果您正在使用Bootstrap，您可以使用警告窗口！

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

- Hakkı