6

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

BrightIntelDusk
  • 4,577
  • 2
  • 25
  • 34
  • 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 Mar 10 '17 at 05:57
  • @GProst That sounds like a great idea! Thank you! I'll give it a try. – BrightIntelDusk Mar 10 '17 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 Mar 11 '17 at 00: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 Mar 11 '17 at 00:24
  • 1
    I assume there exist a problem with `onPaste` event implementation in different browsers ([here](https://dzone.com/articles/paste-wasteland-or-why-onpaste) is one of the articles on that subject). Try to reproduce your error in [plunker](https://plnkr.co), 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 Mar 11 '17 at 09:46
  • @GProst This Plunkr seems to reproduce the issue. In Chrome it works fine though in Firefox and Safari it fails. In it I'm capturing events to detect which one gets fired first. https://plnkr.co/edit/EI0otzqCZrYWCA8GgeNY?p=preview – BrightIntelDusk Mar 13 '17 at 20:39

1 Answers1

4

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:

Community
  • 1
  • 1
GProst
  • 9,229
  • 3
  • 25
  • 47
  • Cool, thanks! It works. On the keydown event I detect if it is the Meta or Control key being pressed and set the variable `this.isMeta = true;`. While this variable is true other keydown events are ignored and I do not call the function to preventDefault. On the keyup event when the Meta or Control key is released or the paste event is called I set the variable to false `this.isMeta = false;`. That made it so that it works across browsers. – BrightIntelDusk Mar 14 '17 at 17:28