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>
