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 ment out my binding to keypress then the function attached to keydown will get called. Finally, if I ment 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.

---

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

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 ment out my binding to keypress then the function attached to keydown will get called. Finally, if I ment 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

• javascript
• jquery
• angularjs

Share Improve this question Follow edited Mar 14, 2017 at 20:41 BrightIntelDusk asked Mar 9, 2017 at 22:21 BrightIntelDuskBrightIntelDusk 4,68522 gold badges2626 silver badges3434 bronze badges 6

• 1 I thought jqlite doesn't support namespaces. Why not to use ng-paste, ng-keypress and ng-keydown instead? It would be more angularly. – GProst Commented Mar 10, 2017 at 5:57
• @GProst That sounds like a great idea! Thank you! I'll give it a try. – BrightIntelDusk Commented Mar 10, 2017 at 17:59
• @GProst ngPaste, ngKeypress, ngKeydown are all wrapped in a directive that uses element.on('paste', element.on('keypress', element.on('keydown' with the callback being the scope function assigned in the template. With ng-paste and ng-keypress the same issue exists where keypress is called first. I've noticed that if event.default is called in ng-keypress then ng-paste is ignored. – BrightIntelDusk Commented Mar 11, 2017 at 0:21
• @GProst The project I'm working on uses jQuery 2.1.3 so name-spaced event handlers are supported in my case. Perhaps the downside with not upgrading jQuery is that it's not keeping up with changes that are being made to the browser. – BrightIntelDusk Commented Mar 11, 2017 at 0:24
• 1 I assume there exist a problem with onPaste event implementation in different browsers (here is one of the articles on that subject). Try to reproduce your error in plunker, with environment your project has (jQuery version etc). May be the problem is in jQuery version... try to change it to 1.x or 3.x. May be it will help. – GProst Commented Mar 11, 2017 at 9:46

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

Ok, I think I found some information on this problem. In parison 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 mand 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 mand, 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?