Element : évènement copy

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilité complète

L'évènement copy de l'API Clipboard se déclenche lorsque l'utilisateur·ice initie une action de copie avec l'interface utilisateur du navigateur.

L'action par défaut de l'évènement est de copier la sélection (le cas échéant) dans le presse-papiers.

Un gestionnaire d'évènement peut modifier le contenu du presse-papiers en appelant setData(format, data) sur la propriété ClipboardEvent.clipboardData de l'évènement, et en annulant l'action par défaut de l'évènement en utilisant event.preventDefault().

Cependant, le gestionnaire ne peut pas lire les données du presse-papiers.

Il est possible de construire et de déclencher un évènement synthétique copy, mais cela n'affecte pas le presse-papiers du système.

Cet évènement se propage dans l'arborescence DOM, jusqu'à Document et Window, est annulable et est composé.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

addEventListener("copy", (event) => { })

oncopy = (event) => { }

HTML

html

<div class="source" contenteditable="true">Copiez le texte de cette zone.</div>
<div class="cible" contenteditable="true">Et collez-le dans celle-ci.</div>

div.source,
div.cible {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}

JavaScript

const source = document.querySelector("div.source");

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  event.preventDefault();
});