keypress and keydown take priority over paste event in Firefox & Safari

Question

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.

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

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.

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?

---

Update

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.

I've created a plunkr that reproduces the issue.

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

---

Final Update

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.

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

Answer 1

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.

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

---

Some related questions:

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