Mit der Eigenschaft clipboardData des Ereignisobjekts, das infolge eines Kopier- oder Einfügeereignisses ausgelöst wurde, können Sie Daten auf der Zwischenablage lesen oder in diese schreiben.
Wenn Sie bei einem Kopier- oder Einfügeereignis Daten in die Zwischenablage schreiben wollen, verwenden Sie die Methode setData() des Objekts clipboardData und übergeben Sie die zu kopierenden Daten und den MIME-Typ:
function customCopy(event){
event.clipboardData.setData("text/plain", "A copied string.");
}
Um auf Daten zuzugreifen, die eingefügt werden, verwenden Sie die Methode getData() des Objekts clipboardData und übergeben den MIME-Typ des Datenformats. Die zur Verfügung stehenden Formate werden durch die Eigenschaft types angegeben.
function customPaste(event){
var pastedData = event.clipboardData("text/plain");
}
Auf die Methode getData() und die Eigenschaft types kann nur in Ereignisobjekten zugegriffen werden, die durch das Ereignis paste ausgelöst werden.
Im folgenden Beispiel wird dargestellt, wie das Standardverhalten beim Kopieren und Einfügen auf einer HTML-Seite außer Kraft gesetzt werden kann. Die Ereignisprozedur copy setzt den kopierten Text in Kursivschrift und kopiert ihn als HTML-Text in die Zwischenablage. Die Ereignisprozedur cut kopiert die ausgewählten Daten in die Zwischenablage und entfernt sie aus dem Dokument. Die Ereignisprozedur paste fügt den Inhalt der Zwischenablage als HTML ein und zeigt den eingefügten Text fett an.
<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>
