La propriété
clipboardData
de l’objet événement envoyé à la suite de l’un des événements copier-coller vous permet de lire des données du Presse-papiers et d’écrire dedans.
Pour écrire dans le Presse-papiers lors de l’exécution d’un événement copier-coller, utilisez la méthode
setData()
de l’objet
clipboardData
en faisant passer les données à copier et le type de MIME :
function customCopy(event){
event.clipboardData.setData("text/plain", "A copied string.");
}
Pour accéder aux données en cours de collage, vous pouvez utiliser la méthode
getData()
de l’objet
clipboardData
en faisant passer le type de MIME du format de données. Les formats disponibles sont indiqués par la propriété
types
.
function customPaste(event){
var pastedData = event.clipboardData("text/plain");
}
Il est possible d’accéder à la méthode
getData()
et à la propriété
types
uniquement dans l’objet d’événement envoyé par l’événement
paste
.
L’exemple ci-dessous illustre la façon de remplacer le comportement copier-coller par défaut dans une page HTML. Le gestionnaire d’événement
copy
met en italiques le texte copié et le copie dans le Presse-papiers sous la forme de texte HTML. Le gestionnaire d’événement
cut
copie les données sélectionnées dans le Presse-papiers et les supprime du document. Le gestionnaire
paste
insère le contenu du Presse-papiers sous forme de HTML en caractères gras :
<html>
<head>
<title>Copy and Paste</title>
<script language="javascript" type="text/javascript">
function onCopy(event){
var selection = window.getSelection();
event.clipboardData.setData("text/html","<i>" + selection + "</i>");
event.preventDefault();
}
function onCut(event){
var selection = window.getSelection();
event.clipboardData.setData("text/html","<i>" + selection + "</i>");
var range = selection.getRangeAt(0);
range.extractContents();
event.preventDefault();
}
function onPaste(event){
var insertion = document.createElement("b");
insertion.innerHTML = event.clipboardData.getData("text/html");
var selection = window.getSelection();
var range = selection.getRangeAt(0);
range.insertNode(insertion);
event.preventDefault();
}
</script>
</head>
<body onCopy="onCopy(event)"
onPaste="onPaste(event)"
onCut="onCut(event)">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</body>
</html>
