Element : évènement paste

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 paste de l'API Clipboard est déclenché lorsque l'utilisateur·ice a lancé une action de « coller » par l'interface utilisateur du navigateur.

Si le curseur se trouve dans un contexte éditable (par exemple, dans un <textarea> ou un élément avec l'attribut contenteditable défini sur true), l'action par défaut consiste à insérer le contenu du presse-papiers dans le document à la position du curseur.

Un gestionnaire pour cet évènement peut accéder au contenu du presse-papiers en appelant getData() sur la propriété clipboardData de l'évènement.

Pour remplacer le comportement par défaut (par exemple pour insérer des données différentes ou une transformation du contenu du presse-papiers), un gestionnaire d'évènement doit annuler l'action par défaut en utilisant event.preventDefault(), puis insérer manuellement les données souhaitées.

Il est possible de construire et de déclencher un évènement paste synthétique, mais cela n'affecte pas le contenu du document.

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("paste", (event) => { })

onpaste = (event) => { }

HTML

html

<div class="source" contenteditable="true">
  Copiez le texte depuis 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 cible = document.querySelector("div.cible");

cible.addEventListener("paste", (event) => {
  event.preventDefault();

  let coller = (event.clipboardData || window.clipboardData).getData("text");
  coller = coller.toUpperCase();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(coller));
  selection.collapseToEnd();
});