javascript - Limit number of characters in input type number - Stack Overflow

admin管理员组

文章数量:1185720

Im trying to limit to X number the characters in a input (type of number). ive tried a lot of options and none seems to work. I dont want to use the option tel as it needs the numeric keyboard on a mobile device (yes, with ., and all the symbols) I tried also the pattern solution but it only worked for iOS, didnt work in android (displayed the normal keyboard).

The best way would be that if the user hits the limit dont let him type anymore, if he wants to highlight the text and re-type a different number he is allow to. Just not let him type more than the specified number of characters.

So, any help is appreciated.

Im trying to limit to X number the characters in a input (type of number). ive tried a lot of options and none seems to work. I dont want to use the option tel as it needs the numeric keyboard on a mobile device (yes, with ., and all the symbols) I tried also the pattern solution but it only worked for iOS, didnt work in android (displayed the normal keyboard).

The best way would be that if the user hits the limit dont let him type anymore, if he wants to highlight the text and re-type a different number he is allow to. Just not let him type more than the specified number of characters.

So, any help is appreciated.

• javascript
• jquery
• html

Share Improve this question Follow asked Feb 28, 2014 at 5:16 marsalal1014marsalal1014 1,90733 gold badges1717 silver badges2424 bronze badges 10

• Use maxlength property in your <input> tag. – Sandeep Nayak Commented Feb 28, 2014 at 5:18
• 1 that would be great! if maxLenght would be supported by number type. in HTML5 the input type of number doesnt have this property. – marsalal1014 Commented Feb 28, 2014 at 5:20
• possible duplicate of Limit number of characters allowed in form input text field – Brett DeWoody Commented Feb 28, 2014 at 5:20
• 3 Not duplicated! I need to be TYPE="NUMBER" not text. – marsalal1014 Commented Feb 28, 2014 at 5:23
• 1 I stand corrected, not a duplicate. – Brett DeWoody Commented Feb 28, 2014 at 5:29

 |  Show 5 more comments

13 Answers 13

Sorted by: Reset to default 8

Note: charCode is non-standard and deprecated, whereas keyCode is simply deprecated.

Check this code

JavaScript

<script>
function check(e,value)
{
    //Check Charater
    var unicode=e.charCode? e.charCode : e.keyCode;
    if (value.indexOf(".") != -1)if( unicode == 46 )return false;
    if (unicode!=8)if((unicode<48||unicode>57)&&unicode!=46)return false;
}
function checkLength()
{
    var fieldLength = document.getElementById('txtF').value.length;
    //Suppose u want 4 number of character
    if(fieldLength <= 4){
        return true;
    }
    else
    {
        var str = document.getElementById('txtF').value;
        str = str.substring(0, str.length - 1);
        document.getElementById('txtF').value = str;
    }
}

and HTML input with number type below

onInput //Is fired also if value change from the side arrows of field in Chrome browser

<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength()" />

Fiddle Demo

Update -- Little bit generic code example

Change above function into this one

function checkLength(len,ele){
  var fieldLength = ele.value.length;
  if(fieldLength <= len){
    return true;
  }
  else
  {
    var str = ele.value;
    str = str.substring(0, str.length - 1);
    ele.value = str;
  }
}

In HTML use like this

<!-- length 4 -->    
<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength(4,this)" />
<!-- length 5 -->    
<input  type="number" onKeyPress="return check(event,value)" onInput="checkLength(5,this)" />
<!-- length 2 -->    
<input  type="number" onKeyPress="return check(event,value)" onInput="checkLength(2,this)" />

Demo

Another option - the tel input type abides by the maxlength and size attributes.

<input type="tel" size="2" maxlength="2" />

<input type="tel" size="10" maxlength="2" />

May be it will be useful.

Here is field to input Patient Age. It allows to input 3 numbers only.

HTML

<input autocomplete="off" class="form-control"  id="Patient_Age" max="150" maxlength="3" name="PatientAge" placeholder="Age" size="3" type="number" value="0">

JS

<script>
    $(function () {         
        $("#Patient_Age").keydown(function (e) {
            // Allow: backspace, delete, tab, escape, enter  
            if ($(this).val().length <= 2 || $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
                // Allow: Ctrl+A
                // (e.keyCode == 65 && e.ctrlKey === true) ||
                // Allow: home, end, left, right
                (e.keyCode >= 35 && e.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
            }
            else {
                event.preventDefault();
            }
            // Ensure that it is a number and stop the keypress
            if ($(this).val().length <= 2 || (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
            else {
                event.preventDefault();
            }
        });
    }); // end of $

</script>

The HTML5 number type input has min and max attributes.

If you wanted to limit the number of characters to 1 you could set a min of 0 and a max of 9.

You can also set the step attribute, which is 1 by default, but would come in use if you wanted the ability to select decimals or other rounded numbers.

<input type="number" maxlength="1" max="9" min="1" size="1" />

Here's the full demo

please review this code

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

<form name="myform">
<input name="limitedtextfield" type="text" onKeyDown="limitText(this.form.limitedtextfield,this.form.countdown,15);" 
onKeyUp="limitText(this.form.limitedtextfield,this.form.countdown,15);" maxlength="15"><br>
<font size="1">(Maximum characters: 15)<br>
You have <input readonly type="text" name="countdown" size="3" value="15"> characters left.</font>
</form>

I think this requires the onkeyup event handler.

Use this handler to keep on entering numbers till 5 keyup's are encountered. After this , don't let the the number to be entered by returning a 0, unless key pressed is backspace or delete .

You can try thiss jQuery code :

In HTML

<input type="number" id="number" />

In JS

$(document).ready(function () {
    var element = document.getElementById('number');

    $("#number").keydown(function (event) {
        // Allow only backspace and delete

        if($(this).val().length <= 9 || event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 )
        {
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
                // let it happen, don't do anything
            } else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        }else{

            event.preventDefault();
        }          

    });


});

I have not any idea wheather its working on IOS N Android but its work on all browser.

DEMO

For Decimal values, lets say "25.2" code is as under.

if(thisObj.value.indexOf(".") >=0)
{
    if(fieldLength <= 4)
    {
        return true;
    }
    else
    {
        var str = thisObj.value;
        str = str.substring(0, str.length - 1);
        thisObj.value = str;
    }
}
else
{
    if(fieldLength <= 2)
    {
        return true;
    }
    else
    {
        var str = thisObj.value;
        str = str.substring(0, str.length - 1);
        thisObj.value = str;
    }
}

You can easily do it like this,

<input type="text" pattern="\d*" maxlength="4">

Proper way 2020 for type number is to check on keydown validation and it should work like this: onkeypress="checkValidation(fieldValue);" <-- on input in html and in js:

checkValidation(a) {
    if (`${a}`.length < 8) {
        return true;
    } else {
        return false;
    }
}

Use the maxlength property like this.

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

Dude why go for javascript? Just try

<input type="text" maxlength="4" size="4">

maxlength will anyways define a maximum length for the input field.

Hope this solved the problem :)

EDIT: Since you specifically want numbers, why dont you use the above and then run a jquery validation to check for numbers? That will also work..

EDIT: Okay, try

<input type="number" name="pin" min="1000" max="9999">

Did you try the property maxlength ?

<input type="text" maxlength="5" name="user" >

本文标签： javascriptLimit number of characters in input type numberStack Overflow