Copy on clipboard on web app

Ionic Framework
1

Hi,

I developed an app with Ionic 4 and I’m trying to copy some text on a mobile’s clipboard. I’ve tried with the javascript function addEventListener. It works as expected on a desktop, but when I try to use it on a mobile, nothing gets copied. This is the code I used, just in case:

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

I tried to do it with the clipboard plugin as well but, since it’s a web app, it doesn’t work.

Any awesome ideas?

2

Prepare a small example on stackBlitz for you, this works for me on mobile devices
Function
Captura
Html
you need to send the id of the item you are going to copy
Captura1

1 Like
3

Thank you for the reply, @crmontiel It works perfectly on a desktop, but when I upload the changes to use it on a mobile device, the text just doesnt get copied. Have you tried it on your mobile?

4

Yes on my mobile this it works perfectly. Iphone 6s ios 13.1 (BETA)

I’m afraid you’ll have to use the native component for mobile deployment then.

Installation

ionic cordova plugin add cordova-clipboard
npm install @ionic-native/clipboard

Usage

import { Clipboard } from '@ionic-native/clipboard/ngx';

constructor(private clipboard: Clipboard) { }

this.clipboard.copy('Hello world');

this.clipboard.paste().then(
   (resolve: string) => {
      alert(resolve);
    },
    (reject: string) => {
      alert('Error: ' + reject);
    }
  );

this.clipboard.clear();

You can see more at Ionic Clipboard Docs

1 Like
5

Acabo de ver que eres de Honduras. Mejor te escribo en español. Jaja

Ya lo intenté. Pero me sale como que cordova no está disponible. Es una web app. Cordova funciona cuando es nativo.

1 Like
6

No hay problema. jaja
Perdon pero quizás no lei detenidamente tu problema y solo me base en la parte superior de tu post.
en web app puedes utilizarlo de esta manera

<button (click)="copiar('Quiero copiar esto')" #textoacopiar>Quiero copiar esto</button>

Podrias enviar la variable que contiene el texto en la función para que de igual manera pueda copiarlo sin problema.

async copiar(texto) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(texto);
    } catch (err) {}
  }
}

Saludos!
Espero te sirva, si no pues me avisas y te comparto otro método.

1 Like
7

Lo estoy intentando y me sale error TS2339: Property 'clipboard' does not exist on type 'Navigator'. Hay que instalar algo o poner algo en el module?

8

Realmente no hay que instalar nada porque eso utiliza el WDK
pero si gustas puedes revisar más a fondo el tema por aca

Si eso no te funciona me avisas y busco otra manera, lo raro es que yo estoy usando una pwa y me funciona, y si la despliego como apk o ipws tambien me funciona

1 Like
9

Hay algún bug en Ionic 4. Si pongo solo navigator.clipboard.writeText('aasdf'); en una función y la hago correr, sale Compiled successfully. Pero justo después me aparece el error que te mandé antes. De todas maneras, como te digo, se compila bien y se guarda en el clipboard, al menos de mi desktop. como no puedo hacer un builg, no me deja subirlo.

10 
async copiar(texto) {
  if (navigator["clipboard"]) {
    try {
      await navigator["clipboard"].writeText(texto);
    } catch (err) {}
  }
}

Proba con este, metendo el clipboard en [""]

1 Like
11

Sigue dando el mismo error. Lo más raro de todo es que cuando hago un console.log (navigator) sale el clipboard. E incluso, me deja utilizarlo.

12

Esque es lo que te digo, ami me funciona sin ningun problema.
Que version de ionic estas usando?

13

La última, acabo de actualizarlo hoy.

14

Tienes desplegada la PWA en alguna url? para que me la compartas para probar desde mi celular?

15

Lo que pasa es que no me deja subir el código.

Este es mi ionic info

Ionic:

Ionic CLI : 5.2.7
Ionic Framework : @ionic/angular 4.8.1
@angular-devkit/build-angular : 0.13.5
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.5
@ionic/angular-toolkit : 1.4.0

16

Estoy reportando el error al git de ionic. Ojalá hayan noticias. Te agradezco muchísimo el tiempo.

17

Yo tengo las siguientes

    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@ionic/angular-toolkit": "~1.5.1",
18

Listo un gusto haber intentado ayudarte, espero encuentres el fallo porque como te comente a mi me funciona correctamente en PWA y la tengo desplegada en HTTPS en una url de la empresa donde laboro funciona bien como te lo comente.

Saludos!

19

Gracias! Tarde o temprano esto saldrá!

Aprovecho para hacerte una pregunta más:

Subí una web app con Ionic y en iOS, cuando pasa de una página a otra por primera vez, tarda muchísimo en hacer el cambio. Sabes si hay alguna manera de quitar el lazy loading y cargar todas las páginas de golpe?

1 Like
20

Buenas noticias. Encontré qué es lo que hacía fallar mi código.

Tenía un import del plugin Clipboard de Cordova. Lo quité y dio sin problema.

Ahora queda testearlo en el móvil