CODEWITHSUNDEEP
javascriptjqueryhtmlbrowser
Jayakumar
Jayakumar

Reputation: 101

How to disable typing special characters only not up, down, left and right keys?

I need enable 0 to 9 also up, down, left, right, delete, tab, home, end and etc like (alt, ctrl) Need Chrome and Firefox browsers

$('.commonNumber').keypress(function(event){    
        var nbr = event.charCode ? event.charCode : event.keyCode;
        // Numbers          8 -> Backspace  9-> Tab
        if ((nbr >= 48 && nbr <= 57) || nbr == 8 || nbr == 9  || nbr == 37 || nbr == 38 || nbr == 46 || nbr == 39 || nbr == 40){
            return true;
        } else {
            return false;
        }

I enable 37, 38, 39,40,46 this codes are left, up, right, down areo and delete button keys but this keys are also %&('. keys using the same code. so this keys are enabled });

Upvotes: 1

Views: 2463

Answers (2)

Ashwini upadhyay
Ashwini upadhyay

Reputation: 1

Block or restrict special characters from input fields with jQuery.

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

//this 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;
    }
  });
});

//this script Not allowing special characters
$("#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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input type='text' id='name' placeholder='Enter your name'><br/><br/>
  <input type='text' id='age' placeholder='Enter your age'>
</div>

Upvotes: 0

John S
John S

Reputation: 21482

Your code for normalizing the character code is incorrect. See the bottom of this answer as to why.

If you are using JQuery, it normalizes the which property for you, so you should use event.which to examine the pressed key. The event.which property will be less than 32 for non-printable characters. Therefore, you should always ignore the key when event.which is less than 32. Otherwise, check if it is a character you want to accept.

I also think you should allow the rejected key events to bubble, so use event.preventDefault() to reject a key, rather than return false.

$('.commonNumber').keypress(function(event) {
  var charCode = event.which;

  if ((charCode >= 32) && ((charCode < 48) || (charCode > 57))) {
    event.preventDefault();
  }
});

jsfiddle

The code above will limit the accepted printable characters to just numeric digits, while still letting the arrow keys, the delete key, the backspace key, and other control keys to work. Key events will also bubble up, so when the Enter key is pressed, it will still submit the form (if the input element is part of a form).

If you are not using JQuery to handle the keypress event, you have to normalize the event properties yourself. According to this stackoverflow answer, you should do:

var charCode = (typeof event.which == 'number') ? event.which : event.keyCode;

Apparently all browsers, except IE<=8, support the event.which property. In IE<=8, the event.keyCode property holds the Unicode reference number for a printable key instead.

The issue with your original code is that in most browsers (other than IE<=8):

  1. event.charCode is the Unicode reference number of the character for printable keys, and 0 for non-printable keys.
  2. event.keyCode is a system and implementation dependent numerical code. (This is often 0 for printable keys.)

For instance, in Firefox you get:

  1. Ampersand key: event.charCode = 38 and event.keyCode = 0.
  2. Up arrow key: event.charCode = 0 and event.keyCode = 38.

Upvotes: 3

Related Questions