2
votes

Événement Capture Paste dans Angular IE11

Je recherche une solution qui me permette de coller ce qui existe dans le presse-papiers lorsqu'un utilisateur clique sur un bouton dans Angular.

J'ai utilisé ce code pour coller des données lorsque l'utilisateur tape Ctrl + V mais je suis bloqué comment déclencher cet événement lorsque l'utilisateur déclenche l'événement, cliquez sur un bouton.

constructor() {
  document.addEventListener('paste', (e: ClipboardEvent) => {
    console.log(e.clipboardData.getData('Text'));
    e.preventDefault();
    e.stopPropagation();
  });
}

copyFromClipBoard(event) {
  // My Code goes here
}

angular

2 commentaires

Voyez, si cela vous est utile. stackoverflow.com/questions/51395393/…

J'ai vu cet article mais je disais s'il existe une nouvelle solution pour angular 6 ou un nouveau crochet pour obtenir les données du presse-papiers

3 Réponses :

3
votes

Vous pouvez utiliser l ' API Clipboard pour accéder à presse-papiers du système. La méthode readText () renvoie une promesse qui se résout en texte copié dans le presse-papiers système:

Modèle:

handleClick() {
  // using bracket notation as TypeScript may complain about `clipboard` property
  navigator['clipboard'].readText().then(clipText => {
    // do something with copied text here
  });
}

Composant: p >

<button (click)="handleClick()">Click Me</button>

Voici un exemple en action.

J'espère que cela vous aidera!

3 commentaires

Merci, j'ai essayé cette solution mais malheureusement elle ne fonctionne pas sur IE11

Vous devez préciser que dans votre question vous devez prendre en charge IE11. Vous devriez également probablement créer un StackBlitz ou similaire pour aider à clarifier le type d'élément avec lequel vous travaillez. Vous pouvez utiliser les techniques héritées décrites ici . Vous devrez probablement utiliser l'élément ref pour vous concentrer sur une zone d'entrée / de texte pour exécuter le collage via document.execCommand ("coller") . Dans tous les cas, plus d'informations sont nécessaires concernant votre modèle.

Vous avez raison, je vais créer un StackBiltz la prochaine fois, c'est bien mieux qu'un simple code. Je dois vous remercier pour votre code, je le mélange avec la spécification IE et cela fonctionne.

0
votes

copyFromClipBoard() {   
    /// For IE
    if (window['clipboardData']) {
      let value = window['clipboardData'].getData('Text');
      console.log(value);
    }
    else {
      // for other navigators
      navigator['clipboard'].readText().then(clipText => {        
        console.log(clipText);
      });
    }
  }

0 commentaires

1
votes

Le moyen le plus simple de le faire est d'utiliser Renderer2 et ElementRef d'Angular.

Vous pouvez simplement injecter Renderer2 dans votre composant / directive et écoutez l'événement paste et faites votre travail:

 renderer.listen(element.nativeElement, 'copy', (event) => {
      // do your stuff
    });

    renderer.listen(element.nativeElement, 'paste', (event) => {
      // Do your thing here
    });

et la classe de composant interne écoutent l'événement copier / coller :

XXX

0 commentaires