Met de eigenschap
clipboardData
van het gebeurtenisobject dat als reactie op een van de kopieer- of plakgebeurtenissen is verzonden, kunt u klembordgegevens lezen en schrijven.
Als u naar het klembord wilt schrijven bij het werken met een kopieer- of knipgebeurtenis, gebruikt u de methode
setData()
van het object
clipboardData
, waarbij u de te kopiëren gegevens en het MIME-type opgeeft:
function customCopy(event){
event.clipboardData.setData("text/plain", "A copied string.");
}
Als u toegang wilt tot de gegevens die worden geplakt, gebruikt u de methode
getData()
van het object
clipboardData
, waarbij u het MIME-type van de gegevensindeling opgeeft. De beschikbare indelingen worden weergegeven door de eigenschap
types
.
function customPaste(event){
var pastedData = event.clipboardData("text/plain");
}
De methode
getData()
en de eigenschap
types
zijn alleen toegankelijk in het gebeurtenisobject dat is verzonden door de gebeurtenis
paste
.
Het volgende voorbeeld geeft aan hoe u het standaardgedrag bij kopiëren en plakken in een HTML-pagina kunt wijzigen. De gebeurtenishandler
copy
maakt de gekopieerde tekst cursief en kopieert deze als HTML-tekst naar het klembord. De gebeurtenishandler
cut
kopieert de geselecteerde gegevens naar het klembord en verwijdert deze uit het document. De gebeurtenishandler
paste
voegt de inhoud van het klembord als HTML in en maakt de ingevoegde tekst vet.
<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>