Свойство
clipboardData
объекта события отправляется в результате события copy или paste и позволяет считывать и записывать данные в буфер обмена.
Для записи данных в буфер обмена при обработке события copy или cut используйте метод
setData()
объекта
clipboardData
, передающего копируемые данные и MIME-тип:
function customCopy(event){
event.clipboardData.setData("text/plain", "A copied string.");
}
Для доступа к вставляемым данным может использоваться метод
getData()
объекта
clipboardData
, передающий MIME-тип формата данных. Доступные форматы содержатся в свойстве
types
.
function customPaste(event){
var pastedData = event.clipboardData("text/plain");
}
Доступ к методу
getData()
и свойству
types
возможен только из объекта события, отправляемого событием
paste
.
В примере ниже показано, как переопределить поведение копирования и вставки по умолчанию на HTML-странице. Обработчик события
copy
выделяет копируемый текст курсивом и копирует его в буфер обмена в виде HTML-текста. Обработчик события
cut
копирует выделенные данные в буфер обмена и удаляет их из документа. Обработчик события
paste
вставляет содержимое буфера обмена в виде HTML и выделяет его полужирным шрифтом.
<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>
