A propriedade clipboardData do objeto de evento despachado como um resultado de um dos eventos de copiar ou colar permite que você leia e escreva dados da área de transferência.
Para escrever na área de transferência ao manipular um evento de copiar ou recortar, use o método setData() do objeto clipboardData, transmitindo os dados para copiar e o tipo MIME:
function customCopy(event){
event.clipboardData.setData("text/plain", "A copied string.");
}
Para acessar os dados que estão sendo colados, você pode usar o método getData() do objeto clipboardData, transmitindo o tipo MIME do formato de dados. Os formatos disponíveis são relatados pela propriedade types.
function customPaste(event){
var pastedData = event.clipboardData("text/plain");
}
O método getData() e a propriedade types podem apenas ser acessados no objeto de evento despachado pelo evento paste.
O exemplo a seguir ilustra como substituir o comportamento de copiar e colar padrão em uma página HTML. O manipulador de eventos copy coloca em itálico o texto copiado e o copia para a área de transferência como texto HTML. O manipulador de eventos cut copia os dados selecionados para a área de transferência e os remove do documento. O manipulador paste insere o conteúdo da área de transferência como HTML e aplica um estilo na inserção como texto em negrito.
<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>
