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.

Download

Example
Demo
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.

Contents

1. Example

2. Demo

3. Conclusion