Restrict keyboard character input with jQuery

It is better to restrict the user from entering invalid input and submit the form.

If the inputted data is invalid then the request is not been executed on the server-side script if added validation and the user needs to again fill the details.

If a field does not require a specific type value like – number, character, special character then stop the user from entering.

In this tutorial, I show how you can restrict keyboard character input with jQuery and JavaScript.

Restrict keyboard character input with jQuery


Contents

  1. Example
  2. Demo
  3. Conclusion

1. Example

For validating input, pressed key ASCII code and check it.

If you don’t know the ASCII code of a character then you can view it from here and define your condition in the keypress Event handler.

Allowing only number

Use the event.which to get the ASCII code of the pressed character to check.

Below script allows only number input.

$(document).ready(function(){
  $("#age").keypress(function(e){
     var keyCode = e.which;
    /*
      8 - (backspace)
      32 - (space)
      48-57 - (0-9)Numbers
    */
 
    if ( (keyCode != 8 || keyCode ==32 ) && (keyCode < 48 || keyCode > 57)) { 
      return false;
    }
  });
});

Not allowing special characters

You can either return false or call preventDefault() method on event variable.

$("#name").keypress(function(e){
 var keyCode = e.which;
 
 /* 
 48-57 - (0-9)Numbers
 65-90 - (A-Z)
 97-122 - (a-z)
 8 - (backspace)
 32 - (space)
 */
 // Not allow special 
 if ( !( (keyCode >= 48 && keyCode <= 57) 
   ||(keyCode >= 65 && keyCode <= 90) 
   || (keyCode >= 97 && keyCode <= 122) ) 
   && keyCode != 8 && keyCode != 32) {
   e.preventDefault();
 }
});

Completed Code

<div class="container">
  <input type='text' id='name' placeholder='Enter your name'><br/><br/>
  <input type='text' id='age' placeholder='Enter your age'>
</div>

<!-- Script -->
<script>
$(document).ready(function(){
  $("#age").keypress(function(e){
    var keyCode = e.which;
    /*
    8 - (backspace)
    32 - (space)
    48-57 - (0-9)Numbers
    */
    if ( (keyCode != 8 || keyCode ==32 ) && (keyCode < 48 || keyCode > 57)) { 
      return false;
    }
  });


  $("#name").keypress(function(e){
    var keyCode = e.which;
 
    /* 
    48-57 - (0-9)Numbers
    65-90 - (A-Z)
    97-122 - (a-z)
    8 - (backspace)
    32 - (space)
    */
    // Not allow special 
    if ( !( (keyCode >= 48 && keyCode <= 57) 
      ||(keyCode >= 65 && keyCode <= 90) 
      || (keyCode >= 97 && keyCode <= 122) ) 
      && keyCode != 8 && keyCode != 32) {
      e.preventDefault();
    }
  });
});
</script>

2. Demo

The first input box does not take a special character and the second only takes numbers.


3. Conclusion

You can also use it to restrict some of the characters or perform an action based on the character pressed e.g. when the enter key pressed you can submit your form.

If you found this tutorial helpful then don't forget to share.

9 thoughts on “Restrict keyboard character input with jQuery”

  1. Hi,

    Nice example, however it doesn’t cater for pasted addresses. (I’m still trying to find a solution for that myself)

    Andrew

    Reply
  2. Maybe this is a better Idea if you don’t like to fiddle around with keycodes (just for the number check):

    jQuery(‘#someId’).on(‘keypress’, function(e) {
    if(isNaN(parseInt(e.key, 10))){
    return false;
    };
    });

    Reply
    • Hi Vinu,
      It is a bug on the mobile browser – keypress, keyup, keydown not works properly in the mobile browser. I am searching for a solution. I will update the post when I find it.

      Reply

Leave a Comment