web開發中常常要實現“復制到剪切板”功能。這個功能很實用，但是由於安全問題，瀏覽器的限制越來越嚴，實現的方法也越來越有限了。Firefox默認下不能直接通過Javascript操作剪切板，必須開啟相關的設置才行。想只通過Javascript技術實現跨瀏覽器的剪切板是行不通的。現在常用的方法是利用JavaScript+Flash實現，普遍流傳的辦法是_clipboard.swf，這是國外最早實現的（著名的Clipboard Copy解決方案: http://www.jeffothy.com/weblog/clipboard-copy/）。但是很可惜，_clipboard.swf在新出來的flash10中無效，因為flash10中規定了只有在swf上進行了實際的操作（比如鼠標點擊）才能啟動剪切板。而_clipboard.swf方法的swf是隱藏的，通過JavaScript來操作flash的剪切板，顯然沒有對swf進行實際的用戶操作。
針對這個，最近國外出現了一種新的方法，而且專門做了一個JavaScript庫 Zero Clipboard ，它包含一個flash影片和一個JavaScript接口，這個flash是透明的（不是隱藏），用戶不會察覺到它的存在。這個flash覆蓋在一個DOM元素上，比如button，div之類，當點擊這個DOM時，你實際點擊的是這個flash，這個作用在flash上的動作能夠開啟flash的剪切板。這實際上就是一種clickjacking。
DEMO頁面 : http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
Zero Clipboard項目主頁： http://code.google.com/p/zeroclipboard/
網上流行的阿里媽媽的復制代碼的實際來源：http://www.jeffothy.com/weblog/clipboard-copy/
zeroclipboard
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>復制到剪切板 by 司徒正美</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
function get(id) { return document.getElementById(id); }
function toClipboard(copy_id,input_id) {
var clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.setText(get(input_id).value);
clip.addEventListener('complete', function (client) {
alert("Copy Ok!");
});
clip.glue(copy_id);
}
</script>
</head>
<body>
<input type="text" id="input_text" />
<input id="copy_button" type="button" value="copy" onmouseOver="toClipboard(this.id,'input_text')" />
<br/>
<input type="text" id="input_text2" />
<input id="copy_button2" type="button" value="copy" onmouseOver="toClipboard(this.id,'input_text2')"/>
<br/>
<input type="text" id="input_text3" />
<input id="copy_button3" type="button" value="copy" onmouseOver="toClipboard(this.id,'input_text3')"/>
</body>
</html>