1

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

Jayakumar
  • 91
  • 1
  • 14
  • 1
    So what have you tried that didn't work as expected? The basics are easy enough to research. If you haven't done any research or attempted something then you are asking your question here far too early – charlietfl Nov 20 '16 at 04:25
  • $('.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; } }); – Jayakumar Nov 20 '16 at 04:39
  • OK..so you have some code but not a proper problem description regarding that code. Take a few minutes to read through [ask] and [mcve] – charlietfl Nov 20 '16 at 04:42
  • 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 – Jayakumar Nov 20 '16 at 04:48
  • So now update the question with those details so anyone reading it will know exactly what your problem is – charlietfl Nov 20 '16 at 04:52
  • Ok. @charlietfl – Jayakumar Nov 20 '16 at 04:53
  • When those other keys are pressed, the shift key will also be pressed. You can tell if the shift key is pressed by checking `event.shiftKey`. – John S Nov 20 '16 at 05:30

2 Answers2

3

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.
Community
  • 1
  • 1
John S
  • 21,212
  • 8
  • 46
  • 56
0

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>
Ashwini upadhyay
  • 1
  • 1