如何限制在html文本字段中的數字的最大值和最小值

我有一個文本字段，應允許用戶輸入數字，最大長度應爲2，最大值應爲31，最小值應爲1 我能夠前2條件，但不知道最後2條件如何限制在html文本字段中的數字的最大值和最小值

有人可以幫我嗎？

<input type="text" name = "ccdate" class="form-control" maxlength="2" onkeypress="return isNumber(event)" > 


function isNumber(evt) { 
    evt = (evt) ? evt : window.event; 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
     return false; 
    } 
    return true; 
}

注意我不想使用HTML5輸入類型=「數字」

來源

2014-09-13 SpringLearner

傢伙小提琴是不是出於某種原因的工作，所以我沒有張貼在問題http://jsfiddle.net/rnr45dfz/ – SpringLearner 2014-09-13 06:17:14

試試這個（純jQuery的方法）：

HTML：

<input type="text" name = "ccdate" class="form-control" maxlength="2"> 
<div id="div1"></div>

JQUERY：

$('[name="ccdate"]').keyup(function(){ 
    if(parseInt($(this).val()) > 31){ 
    $('#div1').html('value cannot be greater then 31'); 
    $(this).val(''); 
    } 
    else if(parseInt($(this).val()) < 1) 
    { 
    $('#div1').html('value cannot be lower then 1'); 
    $(this).val(''); 
    } 
    else 
    { $('#div1').html(''); } 
});

Working Demo

編輯： -（按提問者的評論來檢查用戶輸入的字符串或數字）：

$('[name="ccdate"]').keyup(function(){ 
    if(isNaN($(this).val())) 
    { 
    $('#div1').html('entered string'); 
    $(this).val(''); 
    } 
    else if(parseInt($(this).val()) > 31){ 
    $('#div1').html('value cannot be greater then 31'); 
    $(this).val(''); 
    } 
    else if(parseInt($(this).val()) < 1) 
    { 
    $('#div1').html('value cannot be lower then 0'); 
    $(this).val(''); 
    } 
    else 
    { $('#div1').html(''); } 
});

Working Demo

編輯： -（純JavaScript方法）（只需提供一獨特id到您的文本框中說't1'）

document.getElementById('t1').addEventListener('keyup', function(){ 
this.value = (parseInt(this.value) < 1 || parseInt(this.value) > 31 || isNaN(this.value)) ? "" : (this.value) 
});

Working Demo

來源

2014-09-13 06:27:38

感謝您的回答，正如您所見，我是使用純js來檢查用戶是否正在數字或字符串。你的代碼完全是jquery。所以沒關係將js和jquery混合？你還可以提供jquery來檢查用戶是否輸入字符串或數字 – SpringLearner 2014-09-13 06:35:08

@SpringLearner ...我想你需要這個... http://jsfiddle.net/pft9rwnp/2/ – 2014-09-13 06:38:15

@SpringLearner ...如果需要更多的幫助，然後PLZ評論.. – 2014-09-13 06:44:56

使用最小值和最大值的屬性，如果你想用戶輸入數字，然後給輸入類型的數量，而不是給它文字...

<input type="number" name ="name_u_want_to_give" min="1" max="31" maxlength="2" />

來源

2014-09-13 06:21:29

抱歉，我不想使用INPUT TYPE =」數字「 – SpringLearner 2014-09-13 06:22:14

然後，你必須使用javascript來限制用戶輸入不允許的值..調用input元素的函數來檢查javascript中的條件，並在條件失敗時返回false – 2014-09-13 06:23:58

請根據您的要求更正以下代碼。

`<script type="text/javascript"> 
function minmax(value, min, max) 
{ 
    if(parseInt(value) < 0 || isNaN(value)) 
     return 0; 
    else if(parseInt(value) > 100) 
     return 100; 
    else return value; 
} 
</script> 
<input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value =minmax(this.value, 0, 100)"/>`

來源

2014-09-13 06:25:04 CrazyProgrammer

document.querySelector("*[name=ccdate]").addEventListener("input", function() { 
    var num = +this.value, max = 31, min = 1;   //converts value to a Number 
    if(!this.value.length) return false;    //allows empty field 
    this.value = isNaN(num) ? min : num > max ? max : num < min ? min : num; 
});

http://jsfiddle.net/cha9t3g5/2

來源

2014-09-13 06:50:49

對於不同的方法和短代碼+1，謝謝 – SpringLearner 2014-09-13 06:56:16

如何限制在html文本字段中的數字的最大值和最小值

回答

相關問題