Element : évènement cut

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

Si l'utilisateur·ice tente une action de « coupe » sur un contenu non modifiable, l'évènement cut est tout de même déclenché, mais l'objet évènement ne contient aucune donnée.

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

Un gestionnaire pour cet é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 annuler l'action par défaut en utilisant event.preventDefault().

Notez toutefois que l'annulation de l'action par défaut empêche également la mise à jour du document. Ainsi, un gestionnaire d'évènement qui souhaite émuler l'action par défaut pour « coupe » tout en modifiant le presse-papiers doit également supprimer manuellement la sélection du document.

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 cut, mais cela n'affecte pas le presse-papiers système ni 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("cut", (event) => { })

oncut = (event) => { }

HTML

html

<div class="source" contenteditable="true">Coupez 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("cut", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  selection.deleteFromDocument();
  event.preventDefault();
});