jQuery：按下Backspace键无法触发事件？

Question

我想知道我做错了什么：

$(".s").keypress(function(e) {
   switch (e.keyCode) {
      case 8: // Backspace
      //console.log('backspace');
      case 9: // Tab
      case 13: // Enter
      case 37: // Left
      case 38: // Up
      case 39: // Right
      case 40: // Down
         break;

      default:
         doSearch();
   }
});

我希望当我按下Backspace键时，我的doSearch()函数也能被触发。目前在Chrome和Safari中按下Backspace键时什么都不会发生。

有什么建议吗？

- matt

---

你可以尝试使用这个jQuery插件http://code.google.com/p/js-hotkeys/，并使用“backspace”键别名。 - José Manuel Lucas

它在Chrome上不起作用，但在Firefox上可以。 - vsync

抱歉打扰了，但值得注意的是，e.which比e.keyCode更受欢迎。 - Henry Howeson

Answer 1

使用keyup代替keypress。这可以在用户按下某个键时获取所有键码。

- Jonathon Bolster

---

为什么按 Backspace 键 keypress 事件不会触发，但是 keyup 事件会触发？ - Aaron Digulla

这是一个问题。Keyup触发退格，Keypress不会->奇怪。是否有可能还检查两个键是否按下，例如cmd-c、cmd-v或cmd-a？ - matt

这实际上取决于按键。你需要使用keypress来捕捉回车键，使用keydown来捕捉退格键等等；否则，在某些浏览器中，你将发现你的事件并没有按照你的预期正常工作，特别是当你想要阻止按键的默认行为时。如果你使用了错误的事件类型，要么你的事件根本不会被捕获（比如Backspace），要么你将无法阻止它，因为它已经在你的事件处理代码之前就执行了。 - srcspider

这个答案存在问题，使用 keyup 会破坏数字键盘的功能。你知道有没有一种方法可以正确地检测到完整键盘上的任何按键？ - hughes

"keydown" 是所有按键的更好选择。 - artfuldev

Answer 2

我自己也遇到过这个问题。我使用了.on，所以看起来有点不同，但我做了以下操作：

 $('#element').on('keypress', function() {
   //code to be executed
 }).on('keydown', function(e) {
   if (e.keyCode==8)
     $('element').trigger('keypress');
 });

在这里添加我的解决方案。我需要删除用户输入的社保号码，所以我用了jQuery实现了这个功能。

  $(this).bind("keydown", function (event) {
        // Allow: backspace, delete
        if (event.keyCode == 46 || event.keyCode == 8) 
        {
            var tempField = $(this).attr('name');
            var hiddenID = tempField.substr(tempField.indexOf('_') + 1);
            $('#' + hiddenID).val('');
            $(this).val('')
            return;
        }  // Allow: tab, escape, and enter
        else if (event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
        // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        else 
        {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) &&       (event.keyCode < 96 || event.keyCode > 105)) 
            {
                event.preventDefault();
            }
        }
    });

- Rob

---

如果您使用event.which而不是event.keyCode，它可以在Firefox中工作。http://api.jquery.com/event.which/ - BishopZ

Answer 3

如果您只想在输入更改时触发事件，请使用以下方法：

$('.s').bind('input', function(){
  console.log("search!");
  doSearch();
});

- Marcos Nunes

---

"input" 也不会观察 KeyCodes。这也行不通。 - Mark Pieszak - Trilon.io

Answer 4

根据jQuery的.keypress()文档，它无法捕获非可打印字符，因此退格键在keypress中不起作用，但在keydown和keyup中会被捕获：

当浏览器注册键盘输入时，将向元素发送keypress事件。这类似于keydown事件，但是修改键和非打印键（如Shift、Esc和delete）会触发keydown事件而不是keypress事件。两个事件之间的其他差异可能因平台和浏览器而异。（https://api.jquery.com/keypress/）

在某些情况下，keyup并不理想或具有其他不良影响，而keydown就足够了，因此处理这种情况的一种方法是使用 keydown 来捕获所有按键，然后设置一个短时间间隔的超时，以便输入该键，然后在其中进行处理。

jQuery(el).keydown( function() { 
    var that = this; setTimeout( function(){ 
           /** Code that processes backspace, etc. **/ 
     }, 100 );  
 } );

- Halcyon