web-dev-qa-db-fra.com

Coller un événement en Javascript

Comment puis-je gérer le collage sélectionné par un clic droit en javascript? J'ai essayé avec l'événement "onpaste" et tous les autres événements html disponibles mais rien ne fonctionne.

javascriptjavascript-events
24
Karthik Yan

L'événement onpaste devrait fonctionner dans tous les navigateurs modernes (UPD, y compris Opera> = 12.101).

Liez-le dans jQuery comme ceci:

$('#txt').on('paste', function() {console.log('text pasted!')})​

Voici un exemple en direct: http://jsfiddle.net/7N6Xq/

En JavaScript pur, cela ressemblerait à ceci pour les navigateurs modernes

elem.addEventListener ("paste", handler, false);  // all browsers and IE9+

et pour les anciennes versions IE:

elem.attachEvent ("onpaste", handler);  // IE<9

Vous pouvez également le combiner avec ONINPUT et d'autres événements (changer, propriétéchange, dragdrop, etc.) pour créer un suivi relativement protégé du contenu. changement.

Notes de bas de page:

1 Opera supporte l'API Clipboard à partir de Presto/2.10.286 qui correspond à 12.10 comme suggéré ici . Versions de Blink de Opera (à partir de 15) devrait aussi le supporter, mais je ne peux pas le tester car il n’existe toujours pas de version Linux.

30
Dmitry Pashkevich

L'événement n'est pas exposé par défaut en tant que "onpaste" IIRC. Vous pouvez le faire tout simplement dans jQuery en émettant

jQuery(document).bind('paste', function(e){ alert('paste event caught') });
2
Jeff Watkins

J'ai été surpris que la question # 4532473 soit fermée sans réponse sur ce qui se passe si vous voulez capturer l'événement afterpaste. Comme c'est probablement le problème dans la moitié des cas, une approche possible dans firefox (testé) consiste à enregistrer un événement oninput directement dans le gestionnaire onpaste et à supprimer le gestionnaire oninput dès qu'il est terminé.

En d'autres termes, onpropertychange doit être utilisé au lieu de oninput. (pas testé)

1
CodeFan

Belle solution JS pure (à la demande ...) est disponible sur le site de développement de Mozilla

<!DOCTYPE html>
<html>
<head>
<title>onpaste event example</title>
</head>

<body>
<h1>Play with this editor!</h1>
<textarea id="editor" rows="3" cols="80">
Try pasting text into this area!
</textarea>

<script>
function log(txt) {
  document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));
}

function pasteIntercept(evt) {
  log("Pasting!");
}

document.getElementById("editor").addEventListener("paste", pasteIntercept, false);
</script>

<h2>Log</h2>
<textarea rows="15" cols="80" id="log" readonly="true"></textarea>
</body>
</html>
1
Louis Maddox