Question

我有以下代码：

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/

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

<input id="text-box" autofocus>

Answer 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
);

<input id="noNum">

Answer 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）为这些if s（8和46）添加keyCode

2）不要使用keypress事件并使用keydown代替（如@Teemu所写）。

html密钥码在Firefox中不起作用

3 个答案: