HTML-коды html не работают в Firefox

У меня есть следующий код:

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

Цель состоит в том, чтобы сделать так, чтобы пользователи могли вводить числа, обратный пробел и ключ удаления. Он работает в Chrome и IE, но в firefox вы можете просто вводить числа, а не backspace или удалить ключи.

JSfiddle: https://jsfiddle.net/sdy9gd0g/

Ответ 1

Это работает для меня в 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">

Ответ 2

Почему бы не обработать событие input? Этот метод будет обрабатывать живые изменения с помощью ввода, вырезания, вставки и т.д.

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

Ответ 3

Вы можете просто добавить console.log(e); в свою функцию и отладить, что происходит:

Chrome/IE не вызывает эту функцию при нажатии клавиш Backspace и Delete. Firefox logs keypress { target: <input#noNum>, key: "Backspace", charCode: 0, keyCode: 8 } и keypress { target: <input#noNum>, key: "Delete", charCode: 0, keyCode: 46 } соответственно. Таким образом, существует два решения:

1) Добавьте if для этих keyCode (8 и 46)

2) Не используйте событие keypress и используйте keydown вместо этого (как писал @Teemu).