Home/ Questions/Q 6385785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:56:34+00:00

I am writing this code to detect and allow only alphanumeric and backspace/del/arrow key

  • 0

I am writing this code to detect and allow only alphanumeric and backspace/del/arrow key events in the textbox. It works as intended Except that it does not prevent the % sign, the single quote ' and period . to show up. I have tested on different browsers on localhost, w3cschool website, my laptop keyboard and an external usb keyboard. Please look over the code to see why those keys are allowed and to see whether it is the problem with the regex/filter or the keyboards’ transmission of charcodes.

TIA

Edit
If I use onkeydown event like Prusse suggested, the script will disallow the period or single quote to appear, but it will now allow all the shift/numbers characters to appear !@#$%^&* etc.

When I use both the onkeydown and onkeypress events together (as the code is now), it will restrict the entries to what I want EXCEPT for the % sign. I don’t understand why the % sign won’t get filtered.

If I just change the keycheck variable to just keycheck = /%/; then the % sign is filtered (yes, even though the code say to allow % sign). Very weird. I am using just a regular dell laptop english keyboard.

<head>        
   <script type="text/javascript">

      function keyRestricted(evt) {
          var theEvent = evt || window.event;
          var key      = theEvent.keyCode || theEvent.which;

          var keychar  = String.fromCharCode(key);
          //alert(keychar);
          var keycheck = /[a-zA-Z0-9]/;  

          if (!(key == 8   ||  
                key == 27  ||
                key == 46  || 
                key == 37  || 
                key == 39 )) { // backspace delete  escape arrows

                if (!keycheck.test(keychar)) {          
                theEvent.returnValue = false; //for IE

                    if (theEvent.preventDefault) 
                         theEvent.preventDefault(); //Firefox
                    //alert ("key allowed");
                }   
           }  
      }
   </script>

</head> 

<body>
    Please modify the contents of the text field.
    <input type="text" onKeypress="return keyRestricted(event)" value="" />
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The keypress event don’t use to be fired for the arrow keys, backspace key and stuff like that. You don’t need to check for that.

    In this event you got the charcode representing the key pressed and happens that 

    % charcode 37
. charcode 46
' charcode 39

    In the keypress event the shift status is already applied(eg.: a charCode 97, A charcode 65). If you need to have some special effect on keys that don’t generate characters press you need to listen for keydown/keyup events in those you got keycodes, they are fired for every key in the key board and the shift status is not applied, when you press the key for “A” don’t matter if shift is pressed(or caps lock on) you always get 65.

    Edit:

    Just remove the first if.

    Edit:

    Try:

    function keyRestricted(evt) {
  var theEvent = evt || window.event;
  var rv = true;
  //var key = theEvent.keyCode || theEvent.which;
  var key = (typeof theEvent.which === 'undefined') ? theEvent.keyCode : theEvent.which;
  if (key && (key !== 8)){
    var keychar = String.fromCharCode(key);
    var keycheck = /[a-zA-Z0-9]/;
    if (!keycheck.test(keychar) )
    {
      rv = theEvent.returnValue = false;//for IE
      if (theEvent.preventDefault) theEvent.preventDefault();//Firefox
    }
  }
  return rv;
}

    Did test it on Firefox, Chrome and IE(9-7) and it seem to do want you want.
    Sorry, did post the wrong code, try this one =)

    • 0