I have the following code:

function noNumbers(e)
{
    var charCode = (e.which) ? e.which : 
                 ((e.charCode) ? e.charCode : 
                   ((e.keyCode) ? e.keyCode : 0));
    if((charCode < 48 || charCode > 57) && (charCode > 45 || charCode < 47))
        e.preventDefault();
}

The objective is to make it so that users can type numbers, the backspace key, and the delete key. It works in Chrome and IE, but in firefox, you can just type the numbers,not the backspace or delete keys however.

JSfiddle: /

I have the following code:

function noNumbers(e)
{
    var charCode = (e.which) ? e.which : 
                 ((e.charCode) ? e.charCode : 
                   ((e.keyCode) ? e.keyCode : 0));
    if((charCode < 48 || charCode > 57) && (charCode > 45 || charCode < 47))
        e.preventDefault();
}

The objective is to make it so that users can type numbers, the backspace key, and the delete key. It works in Chrome and IE, but in firefox, you can just type the numbers,not the backspace or delete keys however.

JSfiddle: https://jsfiddle/sdy9gd0g/

• javascript
• html

• Here's the JSfiddle: jsfiddle/sdy9gd0g – user2072826 Commented Jul 1, 2015 at 18:31
• Still doesn't work in firefox. In fact, doing that, breaks it for chrome and IE the same way. – user2072826 Commented Jul 1, 2015 at 18:34
• I do not want the user to be able to type the letter. – user2072826 Commented Jul 1, 2015 at 18:41
• Like so? – Teemu Commented Jul 1, 2015 at 18:46

3 Answers 3

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>

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">

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).