Javascript或jQuery接受文本字段小于100的数字

时间:2014-04-04 11:48:23

标签: javascript jquery

在我的项目中,我有一个文本字段,我需要接受小于或等于100的值。在该文本字段中,如何通过javascript或jquery实现此目的。不知何故,我设法只接受文本框中的数字,但我怎么能限制它不接受大于100的数字。

以下是我试图仅接受数字的代码

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

8 个答案:

答案 0 :(得分:7)

首先,您可以在HTML5中使用number类型,max属性设置为100。

<input id="numberbox" type='number' max='100'>

这将允许您的浏览器在提交时检测到它超过100的时间。但是,它不适用于旧浏览器和某些智能手机。

或者,你可以这样做:

<input type='text' maxlength='2' pattern='^[0-9]$'>

但我觉得这个选择太过分了。但如果你想这样做,那取决于你。

在jQuery中,你可以这样做:

$('#numberbox').keyup(function(){
  if ($(this).val() > 100){
    alert("No numbers above 100");
    $(this).val('100');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='numberbox'>

请同时验证后端,只有足够知识的人才能轻易绕过这个。

答案 1 :(得分:2)

选中此demo

此外,您还必须限制text field

的长度

像这样的东西

var fieldVal = document.getElementById('txtF').value;
//Suppose u want  number that is less than 100
if(fieldVal < 100){
    return true;
}
else
{
  //
}

答案 2 :(得分:1)

使用jquery你可以这样:

$('#my-field').blur(function() {
   if(parseInt($(this).val()) < 100) {
       $(this).val('');
   }
});

当用户离开场时(场焦点松散),会抛出模糊事件。然后,如果该值小于100,则为chekcks,并在必要时将其清空。

答案 3 :(得分:1)

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    var str = String.fromCharCode(charCode);
    if (str>100)) {
        return false;
    }
    return true;
}

你可以使用fromCharCode它可以返回字符

答案 4 :(得分:1)

请使用最大长度

maxlength="2" 

EX。

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  PIN: <input type="text" name="pin" maxlength="2" size="30"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

答案 5 :(得分:1)

你可以这样做:

$('yourElem').on('keydown', function(e){
    if(this.value > 100){
       alert('You have entered more than 100 as input');
       return false;
    }
});

maxlength属性可以限制超过3位的数字,因此您可以使用此限制:

maxlength="3"

但您需要按照上面的建议进行js验证,因为maxlength的用户仍可按要求输入超过100个。

答案 6 :(得分:1)

试试这个:

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

答案 7 :(得分:1)

与您的代码一起,您可以再添加一行来限制text-field接受少于2个char ....

    if (charCode.length > 2) {
    return false;
    }