html keycodes not working in firefox

Question

I have the following code:

function noNumbers(e)
{
    var charCode = (e.which) ? e.which : 
                 ((e.charCode) ? e.charCode : 
                   ((         


        

Answer 1

Why not handle the input event instead? This method will handle live changes via keyboard entry, cut, paste, etc.

(function() {
  var textBox = document.getElementById("text-box");
  textBox.addEventListener("input", function(e) {
    var val = this.value,
      rx = /[^\d]/g;
    if (rx.test(val)) {
      var pos = this.selectionStart;
      this.value = val.replace(rx, "");
      this.selectionStart = pos;
      this.selectionEnd = pos - 1;
    }
  });
})();

<input id="text-box" autofocus>

Answer 2

You can simply add console.log(e); in your function and debug what's going on:

Chrome/IE doesn't call this function on Backspace and Delete key press. Firefox logs keypress { target: <input#noNum>, key: "Backspace", charCode: 0, keyCode: 8 } and keypress { target: <input#noNum>, key: "Delete", charCode: 0, keyCode: 46 } respectively. So there is two solutions:

1) Add if for these keyCodes (8 and 46)

2) Do not use keypress event and use keydown instead (as @Teemu wrote).

Answer 3

This works for me on Firefox.

var keycodes = {
    'backspace': 8,
    'delete': 46,
    'leftArrow': 37,
    'rightArrow': 39,
    'number1': 48,
    'number9': 57
};

function noNumbers(e)
{
    var charCode = e.which ? e.which : 
                 (e.charCode ? e.charCode : 
                   (e.keyCode ? e.keyCode : 0));
    
    if ((charCode < keycodes.number1 || charCode > keycodes.number9) &&
        charCode !== keycodes.delete &&
        charCode !== keycodes.backspace &&
        charCode !== keycodes.leftArrow &&
        charCode !== keycodes.rightArrow)
        e.preventDefault();
}

document.getElementById('noNum').addEventListener(
	'keypress', noNumbers
);

<input id="noNum">