CODEWITHSUNDEEP
javascripthtmlinput
Peter
Peter

Reputation: 33

Limiting number value in an input tag with javascript

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>

Upvotes: 1

Views: 19789

Answers (4)

technicalmastersp
technicalmastersp

Reputation: 1

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

Upvotes: 0

Andrew
Andrew

Reputation: 5340

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" />

Upvotes: 3

Ruddy
Ruddy

Reputation: 9923

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

Upvotes: 9

Igl3
Igl3

Reputation: 5108

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

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

Upvotes: 1

Related Questions