Numbers only in HTML form number input using jQuery

When coding HTML forms, you'll usually want to fix them so that users can only add numbers into the numbers inputs, preventing alpha and special characters.

As you'll see in the below example, you can only enter numeric characters:


To apply the above to all number type inputs in a form, the code is as follows:

The HTML:

<form>
<input type="number" placeholder="Numbers only" />
</form>

Include jQuery after your closing body tag:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Then add the javascript:

<script type="text/javascript">

$(function (){

$('input[type=number]').keydown(function (event){

if ((event.keyCode==65 && (event.ctrlKey===true || event.metaKey===true)) ||

(event.keyCode >=35 && event.keyCode <=40) ||

$.inArray(event.keyCode, [8, 9, 13, 27, 46, 110]) !==-1){

return;

}

if ((event.shiftKey || (event.keyCode < 48 || event.keyCode > 57)) &&

(event.keyCode < 96 || event.keyCode > 105 || event.keyCode===190)){

event.preventDefault();

}

});

});

</script>

If you'd like to do the same using a class instead of the input type:

The HTML:

<form>
<input type="number" class="numbers" placeholder="Numbers only" />
</form>

Include jQuery after your closing body tag:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Then add the javascript:

<script type="text/javascript">

$(function (){

$('.numbers').keydown(function (event){

if ((event.keyCode==65 && (event.ctrlKey===true || event.metaKey===true)) ||

(event.keyCode >=35 && event.keyCode <=40) ||

$.inArray(event.keyCode, [8, 9, 13, 27, 46, 110]) !==-1){

return;

}

if ((event.shiftKey || (event.keyCode < 48 || event.keyCode > 57)) &&

(event.keyCode < 96 || event.keyCode > 105 || event.keyCode===190)){

event.preventDefault();

}

});

});

</script>

And to apply to a specific input using an ID:

The HTML:

<form>
<input type="number" id="numbers" placeholder="Numbers only" />
</form>

Include jQuery after your closing body tag:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Then add the javascript:

<script type="text/javascript">

$(function (){

$('#numbers').keydown(function (event){

if ((event.keyCode==65 && (event.ctrlKey===true || event.metaKey===true)) ||

(event.keyCode >=35 && event.keyCode <=40) ||

$.inArray(event.keyCode, [8, 9, 13, 27, 46, 110]) !==-1){

return;

}

if ((event.shiftKey || (event.keyCode < 48 || event.keyCode > 57)) &&

(event.keyCode < 96 || event.keyCode > 105 || event.keyCode===190)){

event.preventDefault();

}

});

});

</script>

If you need to allow the user to input a period/dot for decimals, just exclude || event.keyCode===190 from the javascript code:

The javascript:

<script type="text/javascript" >

$(function (){

$('input[type=number]').keydown(function (event){

if ((event.keyCode==65 && (event.ctrlKey===true || event.metaKey===true)) ||

(event.keyCode >=35 && event.keyCode <=40) ||

$.inArray(event.keyCode, [8, 9, 13, 27, 46, 110]) !==-1){

return;

}

if ((event.shiftKey || (event.keyCode < 48 || event.keyCode > 57)) &&

(event.keyCode < 96 || event.keyCode > 105)){

event.preventDefault();

}

});

});

</script>