由於發生複製或貼上事件而傳送的 event 物件,其 clipboardData 屬性可讓您用來讀取與寫入剪貼簿資料。
若要在處理複製或剪下事件時寫入剪貼簿,請使用 clipboardData 物件的 setData() 方法,並且傳入所要複製的資料和 MIME 類型:
function customCopy(event){
event.clipboardData.setData("text/plain", "A copied string.");
}
若要存取貼上的資料,您可以使用 clipboardData 物件的 getData() 方法,並且傳入該資料格式的 MIME 類型。可用的格式會透過 types 屬性取得。
function customPaste(event){
var pastedData = event.clipboardData("text/plain");
}
唯有透過 paste 事件所傳送的 event 物件,才能存取 getData() 方法和 types 屬性。
下列範例會說明如何覆寫 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>