html键码在firefox中不起作用答案

【问题标题】：html keycodes not working in firefoxhtml键码在firefox中不起作用
【发布时间】：2015-09-19 01:24:50
【问题描述】：

我有以下代码：

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 中，您可以只输入数字，而不是退格键或删除键。

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

【问题讨论】：

这是 JSfiddle：jsfiddle.net/sdy9gd0g
在 Firefox 中仍然无法使用。事实上，这样做会以同样的方式破坏 chrome 和 IE。
我不希望用户能够输入字母。
Like so?

标签： javascript html

【解决方案1】：

为什么不处理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;
    }
  });
})();

&lt;input id="text-box" autofocus&gt;

【讨论】：

【解决方案2】：

这适用于我在 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
);

&lt;input id="noNum"&gt;

【讨论】：

在所有 3 种浏览器中都非常适合我，谢谢！
虽然我不能确切地告诉你为什么在这种情况下允许这样做，但我们希望用户第一次正确输入数据，如果他们粘贴的数据与预期数据不同，他们不知所措。

【解决方案3】：

您可以简单地在您的函数中添加console.log(e); 并调试正在发生的事情：

Chrome/IE 不会在 Backspace 和 Delete 按键上调用此函数。 Firefox 分别记录 keypress { target: <input#noNum>, key: "Backspace", charCode: 0, keyCode: 8 } 和 keypress { target: <input#noNum>, key: "Delete", charCode: 0, keyCode: 46 }。所以有两种解决方案：

1) 为这些keyCodes（8 和 46）添加if

2) 不要使用keypress 事件，而是使用keydown（正如@Teemu 所写）。

【讨论】：