Angular 5 – Copiar al portapapeles

Verificamos de forma profundamente cada uno de los artículos en nuestra web con la meta de mostrarte en todo momento información veraz y certera.

Solución:

Solución 1: Copia cualquier texto

HTML

Copy this

archivo .ts

copyMessage(val: string)
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  

---

Solución 2: Copiar desde un cuadro de texto

HTML

 
      Copy from Textbox

archivo .ts

    /* To copy Text from Textbox */
  copyInputMessage(inputElement)
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  

Demostración aquí

---

Solución 3: Importar una directiva de terceros ngx-clipboard

copy

---

Solución 4: Directiva personalizada

Si prefiere usar una directiva personalizada, consulte la respuesta de Dan Dohotaru, que es una solución elegante implementada usando ClipboardEvent.

---

Solución 5: Material angular

Los usuarios de material angular 9 + pueden utilizar la función de portapapeles incorporada para copiar texto. Hay algunas personalizaciones más disponibles, como limitar el número de intentos de copiar datos.

Sé que esto ya ha sido muy votado aquí ahora, pero prefiero optar por un enfoque de directiva personalizado y confiar en el ClipboardEvent como sugirió @jockeisorby, mientras me aseguro de que el oyente se elimine correctamente (se debe proporcionar la misma función tanto para agregar como para eliminar detectores de eventos)

demostración de stackblitz

import  Directive, Input, Output, EventEmitter, HostListener  from "@angular/core";

@Directive( selector: '[copy-clipboard]' )
export class CopyClipboardDirective 

  @Input("copy-clipboard")
  public payload: string;

  @Output("copied")
  public copied: EventEmitter = new EventEmitter();

  @HostListener("click", ["$event"])
  public onClick(event: MouseEvent): void 

    event.preventDefault();
    if (!this.payload)
      return;

    let listener = (e: ClipboardEvent) => 
      let clipboard = e.clipboardData ;

    document.addEventListener("copy", listener, false)
    document.execCommand("copy");
    document.removeEventListener("copy", listener, false);
  

y luego usarlo como tal

  
  Copy


public notify(payload: string) 
   // Might want to notify the user that something has been pushed to the clipboard
   console.info(`'$payload' has been copied to clipboard`);

Nota: observe la window["clipboardData"] es necesario para IE ya que no entiende e.clipboardData

Creo que esta es una solución mucho más limpia al copiar texto:

copyToClipboard(item) 
    document.addEventListener('copy', (e: ClipboardEvent) => 
      e.clipboardData.setData('text/plain', (item));
      e.preventDefault();
      document.removeEventListener('copy', null);
    );
    document.execCommand('copy');
  

Y luego simplemente llame a copyToClipboard al hacer clic en el evento en html. (clic)=”copiarAlPortapapeles(‘textocopiar’)”

Sección de Reseñas y Valoraciones

Tienes la opción de ayudar nuestra tarea ejecutando un comentario o puntuándolo te lo agradecemos.

---

---

Utiliza Nuestro Buscador