如何使用關鍵事件的最大值限制文本框值？

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

我建議你嘗試使用HTML5 input型number，與min和max屬性：

<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。

Answer 2

你爲什麼不使用maxlength HTML屬性？

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