由於發生複製或貼上事件而傳送的 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>