javascript - keypress 和 keydown 优先于 Firefox 和 Safari 中的粘贴事件

Question

我有一个使用 jqlite 的 Angular 指令，我想绑定(bind)一个按键、按下和粘贴事件来更新指令上的选项。

我绑定(bind)到粘贴、按键和按键事件使用:

input.bind("paste.elementClass", updateOptions);
input.bind("keypress.elementClass", updateOptions);
// keypress does not fire if the backspace/delete button is pressed. This keydown listener triggers the
// keypress event if backspace/delete is pressed. Didn't use keydown listener instead of keypress because
// keydown did not register if multiple buttons are pressed (shift + d). The keyup event choked
// if a button was pressed and held for longer than the model debounce time.
input.bind("keydown.elementClass", function() {
        // handle this event differently
});

...

function updateOptions(event) {
    var key = event.which || event.keyCode;
    if (event.type === 'paste') {
      scope.internalModel.searchText = event.originalEvent.clipboardData.getData('text');
    } else {
      scope.internalModel.searchText = key ? String.fromCharCode(key) : "";
    }
    scope.onModelChange(scope.internalModel);
}

我测试了我的代码，这个解决方案在 Chrome 中运行良好。但是，当我在 Firefox 和 Safari 中测试它时，它失败了。看来，当我尝试从剪贴板粘贴时，只会调用附加到按键事件的函数。如果我注释掉我对按键的绑定(bind)，那么将调用附加到 keydown 的函数。最后，如果我注释掉 keypress 和 keydown，那么绑定(bind)到 paste 的函数将被调用并正常工作。

当从剪贴板粘贴时，是否有办法防止 keydown 和 keypress 事件在 Firefox 和 safari 上被触发/调用，并且仍然分别检测 keydown 和 keypress？

---

更新

我已经尝试使用 ng-paste、ng-keypress 和 ng-keydown 来找到这个问题的答案，但仍然没有运气。我试过 element.addEventListener 用于粘贴、按键和按键。我用过 jQuery 的 .on 和 .bind，但运气不好。

我创建了一个重现该问题的 plunkr。

http://plnkr.co/edit/EI0otzqCZrYWCA8GgeNY?p=preview

---

最终更新

我找到了下面列出的解决方案，而不是使用 keypress 我使用 keyup 和 keydown 事件来检测何时按下 control 或 meta(super/windows) 键。然后我过滤掉必要的关键事件。我的最终解决方案是使用 jQuery 来绑定(bind)和取消绑定(bind)事件。

参见最终解决方案 http://plnkr.co/edit/EI0otzqCZrYWCA8GgeNY?p=preview

Answer 1

好的，我想我找到了一些关于这个问题的信息。与 keydown 事件相比，keypress 应该仅在您按下显示字符的键时触发:字母、数字等(可打印键)。但问题是 keypress 事件没有官方规范，因此浏览器的实现方式不同。例如，在 Chrome 中 cmd + v 命令不会触发 keypress 事件，但在 Firefox 和 Safari 中它会(就像你只按下 v 键)，它会以某种方式破坏 paste 命令，所以它不会触发。

如果您尝试通过上下文菜单将文本粘贴到您的输入中，您会发现它工作正常。

所以我想建议是使用 keydown/keyup 事件而不是 keypress 如果你还想听 paste 事件。

---

一些相关问题:

• onKeyPress Vs. onKeyUp and onKeyDown
• jQuery: how to filter out non-character keys on keypress event?