Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

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

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

8 months ago · Santiago Trujillo
1 answers
Answer question

0

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?
8 months ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.