如何使用键事件的最大值限制文本框值?

时间:2013-09-23 08:48:15

标签: javascript jquery

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

我尝试使用以下代码并且工作正常

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)停止按键。

更新:我正在尝试进行各种值验证。

3 个答案:

答案 0 :(得分:2)

为什么不使用maxlength HTML属性?

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

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

答案 1 :(得分:2)

我建议您尝试使用HTML input类型numberminmax属性:

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

JS Fiddle demo

这允许用户直接输入数字(使用键盘或复制/粘贴),并允许使用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 Fiddle demo

答案 2 :(得分:1)

要进行验证,您需要做两件事:

  1. 检查用户是否输入了数字
  2. 检查用户是否输入0到100之间的内容
  3. 对于第一个,因为您使用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));
    });