Comment détecter le copier couper et coller en HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-05-16 14:44:02
Thèmes : html - javascript - copier - coller
Question

Comment faire pour détecter les actions de copier couper et coller en HTML ?

Réponse

Pour détecter le copier couper et coller en HTML, vous pouvez utiliser les évènements suivants :

  • oncopy correspond à l'évènement lié à l'action de copier.
  • oncut à l'évènement lié à l'action de couper.
  • onpaste à l'action de coller.

Il suffit de placer ces évènements sur l'élément du DOM à surveiller.

Dans l'exemple ci-dessous on crée trois fonctions, l'une pour le couper, une autre pour le copier et une dernière pour le coller.

Puis on place les évènements sur la balise <body> ce qui nous permet de surveiller l'ensemble d'une page HTML.

Ces évènements sont détectés tant lors d'une copie d'un texte présent initialement dans le code source HTML, que lors d'un couper ou coller d'un texte saisi par l'utilisateur, dans un <textarea> par exemple.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment détecter le copier couper et coller en HTML ?</title>
</head>  
<body oncut="detectionCouper()" oncopy="detectionCopier()" onpaste="detectionColler()">
Copié moi !
<br>
<textarea></textarea>
<script>
function detectionCopier() {
alert("Texte copié");
}
function detectionColler() {
alert("Texte collé");
}
function detectionCouper() {
alert("Texte cooupé");
}
</script>
</body>
</html>