copy 또는 paste 이벤트 중 하나의 결과로 전달된 이벤트 객체의 clipboardData 속성을 사용하여 클립보드 데이터를 읽고 쓸 수 있습니다.
copy 또는 cut 이벤트를 처리할 때 클립보드에 기록하려면 복사할 데이터와 MIME 유형을 전달하여 clipboardData 객체의 setData() 메서드를 사용합니다.
function customCopy(event){
event.clipboardData.setData("text/plain", "A copied string.");
}
붙여넣는 데이터에 액세스하기 위해 데이터 형식의 MIME 유형을 전달하여 clipboardData 객체의 getData() 메서드를 사용할 수 있습니다. 사용할 수 있는 형식은 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>
