在Firefox和&amp ;;中，keypress和keydown优先于粘贴事件。苹果浏览器 [英] keypress and keydown take priority over paste event in Firefox & Safari

问题描述

我有一个使用jqlite的Angular指令，我想绑定一个keypress，keydown和paste事件来更新指令上的选项。

I have an Angular directive using jqlite and I want to bind a keypress, keydown and paste event to update the options on a directive.

我绑定到paste，keypress和keydown事件使用：

I'm binding to the paste, keypress and keydown event using:

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中测试时，它失败了。看来，当我尝试从剪贴板粘贴时，只会调用附加到keypress事件的函数。如果我注释掉我对keypress的绑定，那么附加到keydown的函数将被调用。最后，如果我注释掉keypress和keydown，那么绑定到paste的函数将被调用并正常工作。

I tested my code and this solution works great in Chrome. However, when I test it in Firefox and Safari it fails. It appears that when I attempt to paste from the clipboard only the function attached to the keypress event gets called. If I comment out my binding to keypress then the function attached to keydown will get called. Finally, if I comment out keypress and keydown then the function bound to paste gets called and works properly.

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

Is there a way to prevent keydown and keypress events from being fired/called on Firefox and safari when pasting from the clipboard and still detecting keydown and keypress separately?

更新

仍然没有找到运气这个问题的答案我尝试过使用ng-paste，ng-keypress和ng-keydown。我已经尝试过paste.addEventListener用于paste，keypress和keydown。我没有运气就使用了jQuery的.on和.bind。

Still no luck finding an answer to this issue I've attempted using ng-paste, ng-keypress, and ng-keydown. I've tried element.addEventListener for paste, keypress and keydown. I've used jQuery's .on and .bind without luck.

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

I've created a plunkr that reproduces the issue.

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

最终更新

我找到了下面列出的解决方案而不是使用按键我使用keyup和keydown事件来检测何时按下了控件或元（超级/窗口）键。然后我过滤掉必要的关键事件。我的最终解决方案是使用jQuery来绑定和取消绑定事件。

I found a solution as listed below instead of using keypress I used keyup and keydown events to detect when control or meta(super/windows) key was pressed. Then I filter out the necessary key events. My final solution is using jQuery to bind and unbind events.

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

推荐答案

<好的，我想我找到了一些关于这个问题的信息。与 keydown 事件相比， keypress 只有在按下显示字符的键时才会触发：字母，数字等（可打印的键）。但问题是 keypress 事件没有官方规范，因此浏览器以不同的方式实现它。例如，在Chrome cmd + v 命令中不会触发 keypress 事件，但在Firefox和Safari中它将（如如果你只按 v 键）它会以某种方式中断粘贴命令，因此它不会触发。

Ok, I think I found some information on this problem. In comparison with keydown event, keypress should only fire when you press down on a key that display a character: letter, number etc. (printable key). But the thing is that there is no official specification for keypress event so browsers implement it differently. For example, in Chrome cmd + v command will NOT trigger keypress event, but in Firefox and Safari it will (as if you would press only v key) and it will somehow break paste command, so it won't trigger.

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

If you'll try to paste text to your input via context menu, you'll see it works fine.

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

So I guess the suggestion is to use keydown/keyup events instead of keypress if you want to also listen paste event.

一些相关问题：

• onKeyPress Vs. onKeyUp和onKeyDown


• jQuery：如何过滤掉按键事件中的非字符键？

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

这篇关于在Firefox和&amp ;;中，keypress和keydown优先于粘贴事件。苹果浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！