用于捕获所有键的 JQuery keypress vs keydown 事件答案

【问题标题】：JQuery keypress vs keydown event for capturing all keys用于捕获所有键的 JQuery keypress vs keydown 事件
【发布时间】：2017-04-07 07:02:47
【问题描述】：

我正在尝试为我的 JQuery 应用程序捕获所有关键事件。使用keydown 事件时，我可以获得输入和制表事件，但所有字母都是大写的。所以，我尝试切换到keypress，我听说是小写+大写字母。这行得通，只是它不再捕获输入和选项卡事件。有两全其美的吗？如何捕获所有事件，区分大小写，包括 enter、tab、shift、alt 等键。

【问题讨论】：

.on('keypress,keydown'..... 可能是？
但是不会调用两个事件吗？如何区分为每个事件生成的代码？例如，如果按下字母键，我需要来自keypress 事件的字符代码，如果它是非字母键，我需要来自keydown 事件的代码。
不，你不能在按键中捕获 enter 和 tab。
由于某种奇怪的原因，keypress 可以毫无问题地捕获 enter 和 tab 键。顺便问一下，您使用的是什么浏览器？我正在使用最新的 Firefox。
首先keypress不是官方指定的事件（见w3c: keypress），因此浏览器之间可能会有所不同，规范建议的事件而不是keypress是beforeinput这个名字更具描述性，解释了为什么你会得到某些事件，为什么不，beforeinput（或keypress）只有在导致输入时才会发生。 keydown：按下的物理键，keypress/beforeinput 按下的键产生的输入（字符值）。

标签： javascript jquery

【解决方案1】：

在按键事件中，调用以事件为参数的方法并添加这一行，

e.preventDefault()

这将暂停操作。

谢谢，

【讨论】：

为按键和按下事件调用此函数。

【解决方案2】：

这样做怎么样？

$(window).on('keydown keypress', function(e) {
  e.preventDefault();
  var code = e.keyCode || e.which;
  console.log(code);
});

这在理论上应该做的是防止另一个事件被触发，但是因为我们同时调用了 keydown 和 keypress，所以肯定会触发其中一个事件。现在这可能会对您的其余代码产生负面影响，因此请谨慎使用。

【讨论】：

我决定做.on('keydown keypress', function(e) { ... } 然后在函数中检查它是哪个事件。如果是keydown 事件，我处理输入、删除、制表符等。如果是keypress 事件，我处理字母。

【解决方案3】：

希望这有助于您尝试做的事情

$(document.body).on('keypress', function(e) {
  var keycode = e.keyCode;

  var valid =
    (keycode > 47 && keycode < 58) || // number keys
    keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
    (keycode > 64 && keycode < 91) || // letter keys
    (keycode > 95 && keycode < 112) || // numpad keys
    (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
    (keycode > 218 && keycode < 223); // [\]' (in order)
  if (valid) {
    console.log(keycode + ' keypress'); //printable char on keypress
  }

});

$(document.body).on('keyup', function(e) {
  var keycode = e.keyCode;
  var valid =
    (keycode > 47 && keycode < 58) || // number keys
    keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
    (keycode > 64 && keycode < 91) || // letter keys
    (keycode > 95 && keycode < 112) || // numpad keys
    (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
    (keycode > 218 && keycode < 223); // [\]' (in order)
  if (!valid) {
    console.log(keycode + ' keyup'); //non printable char on keyup
  }
});

从此SO link获得可见字符验证

【讨论】：

【解决方案4】：

 $(".num").keypress(function (e) {
    console.log('[keypress] key' + e.key + ' keyCode' + e.keyCode + ' which' + e.which);
    var kc = e.keyCode || e.which;
    if (kc < 48 || kc > 57)/* number keys*/ {
        //$.alertme('no');
        if (e.preventDefault) {
            e.preventDefault();
            console.log('[keypress] preventDefault');
        } else {
            e.returnValue = false;
            console.log('[keypress] returnValue');
        }
    }
    //$.alertme('ok');
    //var re = /[0-9]/.test(e.key);//not working android browser
    //if (!re) {
    //    if (e.preventDefault) {
    //        e.preventDefault();
    //    } else {
    //        e.returnValue = false;
    //    }
    //}
});

只检查数字添加 num 类来输入文本

【讨论】：

这不是他问题的答案，他问的是完全不同的东西。