Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

145
Visualizações
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

over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

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?
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda