JavaScript Keycode 46 is DEL Function key or (.) period sign?

Question

Im writing some logic in JavaScript using jquery, where i must check the input content against a REGEX pattern ex:

"^[a-zA-Z0-9_]*$"  //Alpha-numeric and _

The logic is almost done, i just have a little problem filtering the function key DEL, my logic goes like this:

var FunctionsKey = new Array(8, 9, 13, 16, 35, 36, 37, 39, 46);

function keypressValidation(key) {
            if (config.regexExp != null) {
                if ($.inArray(key, FunctionsKey) != -1) {
                    return true;
                }
                else {
                    var keyChar = String.fromCharCode(key);
                    return RegexCheck(keyChar);
                }
            }
            return true;
        }

If the KeyCode is one of those in the array, i let it pass, if not i get the char and compare it against the REGEX. The problem is: in some Browsers the DEL and '.' (period sign) have the same key Code 46.

So is there a better logic to filter the function keys or must i write a condition for that case, maybe removing the 46 from the array and try to convert it to char and if is (.) let it go to the Regex function if not let it pass? The other question will be are there more shared Key Codes in some browsers?

EDIT: My suggested solution wont work because it doesn't matter which key the user pressed (DEL or period) i always get (.) as CHAR at least on OPERA and FF =(.

Solution 1

110 is the decimal key code, 46 is the DEL key.

For some fun: put this in to see what you hit! EDIT: added a focused event

   /* handle special key press */
$(document).ready(function() {
  function checkAKey(e) {
    var shouldBubble = true;
    switch (e.keyCode) {
      // user pressed the Tab 
      case 9:
        {
          alert("Tab hit, no bubble");
          shouldBubble = false;
          break;
        };
        // user pressed the Enter    
      case 13:
        {
          alert("Enter");
          break;
        };
        // user pressed the ESC
      case 27:
        {
          alert("Escape");
          break;
        };
    };
    /* this propogates the jQuery event if true */
    return shouldBubble;
  };

  $("*").keydown(function(e) {
    return checkAKey(e);

  });
});

OR

$(document).ready(function() {
  /* handle special key press */
  function checkFieldKey(e, me) {
    var shouldBubble = true;
    switch (e.keyCode) {
      // user pressed the Enter
      case 13:
        {
          $(me).blur();
          $("#somewhereElse").focus();
          shouldBubble = false;
          break;
        };
    };
    /* this propogates the jQuery event if true */
    return shouldBubble;
  };
  /* user pressed special keys while in Selector */
  $("#myField").keydown(function(e) {
    return checkFieldKey(e, $(this));
  });
});

Solution 2

Decimal or dot key code on keypad is 190.. decimal on numpad is 110.

cheers..!!

Solution 3

The difference is: On keypress "DELETE" key and "." key returns the keycode 46.

So write the code on keyup or key down, then "DELETE" key works well.

To check http://javascript.info/tutorial/keyboard-events

Wrong code

window.addEventListener("keypress", dealWithKeyboard, false);

Right code:

window.addEventListener("keydown", dealWithKeyboard, false);

Final code

 window.addEventListener("keydown", dealWithKeyboard, false);
 function dealWithKeyboard(e) {   // CHECK KEYPRESS EVENT
         if(e.keyCode ==46){
           delete_object();} 
      }

its working well for me.

Solution 4

@Mark Schultheiss' answer is really good, I'll add some more to it: when you need to push the DEL button on the keyboard outside the input element (that is when a text field loses focus) you have to intercept it. This can be done like so:

$("#selector-for-a-textbox, body").keydown(function(event){
  if(event.keyCode==46){
     // do something here
  }
});

View more solutions

Comments

[Mark Schultheiss]

note: There are two '.' keys on many keyboards, try them both, (190 seems like it might be a decimal if I remember correctly from dead brain cells :) You can add an alert(); to find out exactly

[JOBG]

ok, the first that i notice is the you use keydown instead of keypress, and it seems that there is a diff in wich event i choose, currently im using keypress and the result with the method are (.) = 0(FF) - 46(Opr), DEL = 46 in the other hand keydown gives (.) = 190, DEL = 46 for both browsers, why the differences?

[JOBG]

well thx for the answer, i find a page that clarified the problem, with your answer and that i can resolve the problem =). blog.pothoven.net/2008/05/…

[Mark Schultheiss]

Welcome, yes there is a difference, I find the keydown a bit more reliable for my purposes. Glad this works for you either way :)

[Abela]

The other one that gets me all the time is - (189) and - (109)