Question

可能重复：
How to impose maxlength on textArea in HTML using JavaScript

我有一个按钮网格，用户可以在其中选择一个按钮。让忽略按钮“真或假”和“是或否”，其他按钮从“3”变为“26”。现在有一个文本框（#numberAnswerTxt），用户可以在其中选择用户想要的答案数。现在我要做的是用户不能在文本框中键入一个数字，该数字超过按钮中的选项数量。

因此，例如，如果用户从网格中选择按钮“3”，那么在文本框中，如果用户键入更高的值，则用户只能在文本框中输入数字3作为最大数字。数字然后文本框应自动将数字更改为最高数字“3”。

另一个例子是，如果用户从网格中选择“21”按钮，那么在文本框中，如果用户键入了一个，则用户只能输入数字21作为文本框中的最大数字。如果数字越大，文本框应自动将数字更改为最高数字“21”。

有谁知道怎么做？

代码在jsfiddle中，单击here

谢谢

Answer 1

这样的事情应该这样做：

// inside your document ready handler:

$("#numberAnswerTxt").change(function(e){
   this.value = Math.min(+this.value, +$("#gridTxt").val());
});

在更改时，它将采用键入的最小值和其他字段中的值。离开（制表符或单击）字段时会触发更改事件。如果您希望在用户输入时使用keyup()而不是change()，则会发生这种情况。

演示：http://jsfiddle.net/aMmNL/1/

您可能需要添加一些验证，输入的值实际上是一个数字。我上面的代码使用一元+运算符将字符串值转换为数字，这是非常必要的，因为（我很确定）Math.min函数会为您转换，但请注意它将返回NaN如果其中一个值无法转换。

注意：您的jsfiddle有一个文档就绪处理程序嵌套在另一个文档就绪处理程序中：

$(document).ready(function () { /* your code here */ });
// is equivalent to
$(function() { /* your code here */ });

虽然它不止一个，但除非它们在单独的JS文件中，否则没有多大意义，并且嵌套它们没有意义。

Answer 2

使用jquery，只需执行这样的代码;

$(document).ready(function() {
    $("#mytextbox").change(function() {
         var max = $("#mybutton").val();
         var number = $("#mytextbox").val();
         if(number > max) {
              $("#mytextbox").val(max);
         }
    });
});

其中 mytextbox 是您的文本框，其中包含答案数，而 mybutton 是字段（如果用户选择的数字）;

Answer 3

http://jsfiddle.net/aMmNL/3/

只需将此代码添加到document.ready事件处理程序：

$('#numberAnswerTxt').bind('keyup', function () {

    //get the integer value of the `#gridTxt` input
    var gridTxt = parseInt($('#gridTxt').val().replace(/[^0-9\.]+/g, ''));

    //if `#gridTxt`'s value has been set then limit this input's value to `#gridTxt`'s value
    if (gridTxt > 0) {
        this.value = parseInt(this.value.replace(/[^0-9\.]+/g, ''));
        if (this.value > gridTxt) {
            this.value = gridTxt;
        }

    //otherwise if no value has been set for `#gridTxt` then reset the value of this input
    } else {
        this.value = '';
    }
});

Answer 4

这是一个非常简单的解决方案我之前我看到其他答案已经发布了。无论如何它在这里。

$('#numberAnswerTxt').keyup(function(event) { var theval = $('#gridTxt').val(); if (parseInt(theval) && !(this.value <= theval)) { this.value = theval; } });

编辑：

也许最好考虑多个事件（比如其他人提到的onchange）：

// onChange and onKeyUp now fire the same event handler $('#numberAnswerTxt').bind('keyup change', function(event) { var theval = $('#gridTxt').val(); if (parseInt(theval) && !(this.value <= theval)) { this.value = theval; } });

我希望文本框不显示高于最大值的数字

4 个答案: