Tengo una directiva Angular que usa jqlite y quiero vincular un evento de pulsación de tecla, pulsación de tecla y pegado para actualizar las opciones en una directiva.
Me estoy vinculando al evento de pegado, pulsación de tecla y pulsación de tecla usando:
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); }
Probé mi código y esta solución funciona muy bien en Chrome. Sin embargo, cuando lo pruebo en Firefox y Safari falla. Parece que cuando intento pegar desde el portapapeles solo se llama a la función adjunta al evento de pulsación de tecla. Si comento mi vinculación a la pulsación de tecla, se llamará a la función adjunta a la pulsación de tecla. Finalmente, si comento la pulsación de tecla y la pulsación de tecla, se llama a la función vinculada a pegar y funciona correctamente.
¿Hay alguna manera de evitar que los eventos de pulsación de tecla y pulsación de tecla se disparen/invoquen en Firefox y Safari al pegar desde el portapapeles y seguir detectando pulsación de tecla y pulsación de tecla por separado?
Actualizar
Todavía no tuve suerte para encontrar una respuesta a este problema. Intenté usar ng-paste, ng-keypress y ng-keydown. Probé element.addEventListener para pegar, presionar teclas y presionar teclas. He usado .on y .bind de jQuery sin suerte.
Creé un plunkr que reproduce el problema.
http://plnkr.co/edit/EI0otzqCZrYWCA8GgeNY?p=vista previa
Actualización final
Encontré una solución como se detalla a continuación en lugar de usar la pulsación de tecla. Utilicé eventos de tecla arriba y abajo para detectar cuándo se presionó la tecla de control o meta (super/windows). Luego filtro los eventos clave necesarios. Mi solución final es usar jQuery para vincular y desvincular eventos.
Consulte la solución final http://plnkr.co/edit/EI0otzqCZrYWCA8GgeNY?p=preview
Ok, creo que encontré algo de información sobre este problema. En comparación con el evento de keypress
de tecla, la pulsación de tecla solo debe keydown
cuando presiona una tecla que muestra un carácter: letra, número, etc. (tecla imprimible). Pero la cuestión es que no existe una especificación oficial para el evento de keypress
de tecla, por lo que los navegadores lo implementan de manera diferente. Por ejemplo, en Chrome, el comando cmd + v
NO activará el evento de keypress
de tecla, pero en Firefox y Safari lo hará (como si solo presionara la tecla v
) y de alguna manera romperá el comando paste
, por lo que no se activará.
Si intenta pegar texto en su entrada a través del menú contextual, verá que funciona bien.
Entonces, supongo que la sugerencia es usar eventos keydown
/ keyup
en lugar de presionar keypress
si también desea escuchar el evento paste
.
Algunas preguntas relacionadas: