Limiting number value in an input tag with javascript

Question

I am creating a form and i want the input tag to accept numbers only and i also want to limit the numbers to be from 0 - 20.

This my html code:

<input type="text" name="three" class="actual" id="three" maxlength="2" onkeypress="return ForNumbers(event)" />

This is my javascript code:

    <script type="text/javascript">
        function ForNumbers(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
return true;
        }
    </script>

what is the issue with this code? any error? or any abnormal behavior?? — zzlalani
– zzlalani, Commented Nov 21, 2013 at 8:00
i need an additional code to it. i want to the input tag accept only values between 0 and 20 — Peter
– Peter, Commented Nov 21, 2013 at 8:12

Ruddy · Accepted Answer · 2013-11-21 08:26:26Z

9

Should be able to do something like this:

if (input.value < 0) input.value = 0;
if (input.value > 20) input.value = 20;

Simple as that if that's what you mean.

You could get this to run when the value for the input changes (onChange) that way they can see the limit.

Full function:

HTML:

<input type="text" onchange="limiter(this);" />

Javascript:

function limiter(input) {
   if (input.value < 0) input.value = 0;
   if (input.value > 100) input.value = 100;
}

Working Demo

edited Nov 21, 2013 at 8:26

answered Nov 21, 2013 at 8:02

Ruddy

9,9435 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pratim_b Over a year ago

or might be an alert and return false. Anyways +1

Peter Over a year ago

Please can i get the full script with the javascript function

Ruddy Over a year ago

@user3016488 I have made an edit to my answer, that's how I would have it. If you want it differently I'm sure you can edit it to your needs.

Peter Over a year ago

thanks for your effort Ruddy but its not working. I wrote this code: <input type="text" onchange="limiter(this);" /> <script language="javascript"> function limiter(input) { if (input.value < 0) input.value = 0; if (input.value > 20) input.value = 20; } </script>

Andrew · Accepted Answer · 2013-11-21 08:30:54Z

3

If you need to support old browsers, try this:

    function ForNumbers(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode;

        if (
        //0~9
        charCode >= 48 && charCode <= 57 ||
           //number pad 0~9
           charCode >= 96 && charCode <= 105 ||
        //backspace
           charCode == 8 ||
        //tab
        charCode == 9 ||
        //enter
        charCode == 13 || 
        //left, right, delete..
        charCode >= 35 && charCode <= 46
        )
        {
        //make sure the new value below 20
        if(parseInt(this.value+String.fromCharCode(charCode), 10) <= 20) 
            return true;
        }

        evt.preventDefault();
        evt.stopPropagation();

        return false;
    }

http://jsfiddle.net/3StSM/2/

It also works fine with:

  <input id="numIpt" type="number" min="0" max="20" maxlength="2" />

edited Nov 21, 2013 at 8:30

answered Nov 21, 2013 at 8:19

Andrew

5,3601 gold badge22 silver badges22 bronze badges

1 Comment

Peter Over a year ago

Thank you very much Andrew. This solves my challenge

Igl3 · Accepted Answer · 2013-11-21 07:58:39Z

1

Use html type number and inline elements min="1" and max="20" to limit your input field.

<input type="number" min="1" max="20" />

answered Nov 21, 2013 at 7:58

Igl3

5,1085 gold badges39 silver badges69 bronze badges

Comments

technicalmastersp · Accepted Answer · 2024-09-03 02:23:19Z

HTML

1. in input tag add a ID.

<input id="technicalMasterSP" type="text" placeholder="0"c>

2. if you insert value by self created keyboard ( Ex : Calculator, etc.).

<div class="keyboard">
   <div class="button div1" onclick="sendValue('1')">1</div>
   <div class="button div2" onclick="sendValue('2')">2</div>
</div>

JavaScript

3 create a function and check a condition if my #display value length is less than 13 ( 13 is indexing number so 13 = 14 digits ) so add value in my display input box, if my #display length is equal to 13 so don't add any other value.

function sendValue(value) {
   let disValue = document.getElementById('technicalMasterSP')
   if(disValue.value.length <= 13){
      document.getElementById('display').value += value;
   }
}

If you use external keyboard

so add maxlength attribute in your input tag.

<input id="technicalMasterSP" type="text" placeholder="0" maxlength="10">

Collectives™ on Stack Overflow

Limiting number value in an input tag with javascript

4 Answers 4

Full function:

HTML:

Javascript:

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Full function:

HTML:

Javascript:

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related