Tengo un modal de imagen donde el usuario puede cargar o pegar una imagen. Ambos funcionan muy bien, excepto que actualmente tengo los botones en el modal que capturan el foco, por lo que pegar solo funciona haciendo clic manualmente fuera de los botones. Me gustaría que cualquier pegado funcione si este componente tiene foco, o cualquier cosa dentro del componente tiene foco.
<div onPaste="onPaste()"> <button class="__cancel" aria-label="Close" onClick="onClickCancel()"> <button ... upload .../> </div>¿Hay alguna manera de permitir que la acción de pegar pase a través de los botones?
Esta es en realidad una aplicación angular, por lo que a continuación se acerca más a mi código real:
<div (paste)="onPaste($event)" cdkTrapFocusAutoCapture cdkTrapFocus> <button class="__cancel" aria-label="Close" (onClick)="onClickCancel()"> <button ... upload .../> </div>He intentado agregar el método de pegado a los botones, pero no se activan.
<div (paste)="onPaste($event)" cdkTrapFocusAutoCapture cdkTrapFocus> <button class="__cancel" aria-label="Close" (onClick)="onClickCancel()" (paste)="onPaste($event)"> <button ... upload (paste)="onPaste($event)".../> </div>Gracias
El evento de Paste es interceptado por todos los elementos HTML, pero solo tiene efecto en los elementos que son un contexto editable, como <input> s y <textarea> s.
Elementos como <div> s o <p> s pueden ser receptivos a (paste) solo si pueden tener contenido. Esto es posible activando contenteditable :
<div onPaste="onPaste()" contenteditable="true"> <button class="__cancel" aria-label="Close" (click)="onClickCancel()"> //^-here also <button ... upload .../> </div>Aquí hay un extracto del documento API sobre esto:
Si el cursor está en un contexto editable, la acción de pegar insertará los datos del portapapeles en el formato más adecuado (si lo hay) compatible con el contexto dado.
La acción de pegar no tiene efecto en un contexto no editable, pero el evento de pegado se activa de todos modos.
Además, debido a las restricciones de privacidad, el elemento debe estar enfocado:
Para ayudar a prevenir el abuso, esta API no debe estar disponible a menos que la secuencia de comandos se esté ejecutando en el contexto de un documento que tiene el foco.
Cada navegador puede tener diferentes comportamientos, pero tener en cuenta estas restricciones puede ayudar a que el código funcione en todas partes.
--- EDICIONES ---
Hacer que sus botones sean editables crea algunos problemas.
El usuario puede enfocar esa área y tendrá un cursor. Esto se puede arreglar estilizando con
[contenteditable] { caret-color: transparente; }
También le da al usuario la posibilidad de cambiar su contenido, lo que probablemente no sea deseado. Esto se puede arreglar agregando un controlador keydown:
<button class="__cancel" aria-label="Cerrar" mat-icon-button onClick="onClickCancel()" onPaste="onPaste($evento)" contenteditable="true" onKeydown="preventKey($evento)">
como:
preventKey(event: KeyboardEvent) { // Buttons need contenteditable to receive (paste), // but we don't want our buttons to be editable, so this is blocked by this function. if ( !( event.key === 'Tab' || event.keyCode == 9 || ((event.ctrlKey || event.metaKey) && (event.key === 'v' || event.keyCode == 86)) ) ) { event.preventDefault(); } }Pegar en un elemento editable no funciona en safari, a menos que apliquemos estilo
selección de usuario: automático;
Si tiene un proyecto angular (como en la pregunta original), esto rompe el cdkTrapFocus. Por lo que sabe el autor, este es un error en angular. Consulte https://github.com/angular/components/issues/23846