javascript - 如何用关键事件的最大值限制文本框值？

Question

我有一个文本框，我想使用键事件将该值限制为最大值

我尝试使用下面的代码，它的工作正常

function validateRange(ele) {       
    if(ele.val() < 0 || ele.val() > 100){
        console.log('false');
    }else{
        console.log('true');
    }
}
$('.digit-validation').keyup(function(event){
    validateRange($(this));
});

HTML：

<form:input type="text" path="depth" cssClass="number inplace-textbox digit-validation" data-min="0" size="10" />

我想要if(ele.val() < 0 || ele.val() > 100)的是停止按键。

更新：我正在尝试进行值范围验证。

Answer 1

我建议您尝试使用 HTML5input类型的number, withmin和max属性：

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

JS 小提琴演示。

这允许用户直接输入数字（使用键盘，或复制/粘贴），并允许使用step属性控制增量（step="2"例如，每次单击微调器时将允许增量或减量 2箭头）。

但是，如果您必须使用非数字input：

Number.prototype.between  = function (a, b, inclusive) {
    var min = Math.min.apply(Math, [a,b]),
        max = Math.max.apply(Math, [a,b]);
    return inclusive ? this >= min && this <= max : this > min && this < max;
};

$('.digit-validation').keydown(function(event){
    var v = parseFloat(this.value + String.fromCharCode(event.which));
    return parseFloat(v).between(0,100,true);
});

JS 小提琴演示。

Answer 2

为什么不使用maxlengthHTML 属性？

<input type="text" maxlength="100" />

没有必要使用 JS 来实现这一点。

Answer 3

为了您的验证，您需要两件事：

1. 检查用户是否输入数字
2. 检查用户是否输入了 0 到 100 之间的内容

第一个，因为你使用 jQuery，你可以使用$.isNumeric(). 对于第二个，您需要将值解析为整数，这要归功于parseInt().

那会给你：

http://jsfiddle.net/tLwYX/

function validateRange(ele) {    
    var val = ele.val();
    if(!$.isNumeric(val) || parseInt(val,10) < 0 || parseInt(val,10) > 100){
        $('#result').html('false');
    }else{
        $('#result').html('true');
    }
}
$('.digit-validation').keyup(function(event){
    validateRange($(this));
});