這是一個很有意思的地方,很多不了解的人或者初級的js編程者會覺得很不可思議,js都那么強大了,訪問剪貼板一個粘貼復制,大概就是一行命令的事情,但是事實如此,js對於訪問本地計算機的剪貼板的支持其實是十分滯后的,看起來似乎是一個很小很小的一個功能,其實即使是html5標准里對於剪貼板操作目前也仍處於草案提議階段,各瀏覽器有自己各自的部分實現方案,有的甚至根本就沒有需要的實現接口,而且事實上,訪問剪貼板的接口標准制定並不是那么容易的一件事情,需要考慮的事情有很多方面,具體哪些地方感興趣的可以參考這里
需要標准還在建立中,但是事實上,遇到類似的需求我們並不是不能實現,所以這里總結一下大致幾種實現方案:
1.window.clipboardData對象 (有兼容性問題,火狐上不行,支持ie,其它瀏覽器未知)
當復制的時候body的oncopy事件被觸發,直接return false就是禁止復制,注意是不能復制網頁里的文本了
<body oncopy="alert('禁止復制!');return false;">
clipboardData對象 ,注意網頁里剪貼板到現在只能設置Text類型，即只能復制文本
clearData("Text") 清空粘貼板 clearData(sDataFormat) 刪除剪貼板中指定格式的數據。
getData("Text") 讀取粘貼板的值 getData(sDataFormat) 從剪貼板獲取指定格式的數據。
setData("Text",val) 設置粘貼板的值 setData(sDataFormat, sData) 給剪貼板賦予指定格式的數據。返回 true 表示操作成功。
復制的數據加入相關來源
clipboardData.setData('Text',clipboardData.getData('Text') +
'\r\n來自Pigeon網站' + location.href);
調用時注意不能再body 的oncopy事件上直接用 <body oncopy="setTimeout('ModifyCopyData()',100)">
2.例子:
<input type="text" onclick="oCopy(this)" value="你好.要copy的內容!"> <script> function oCopy(obj){ obj.select(); // 選中輸入框中的內容 js=obj.createTextRange(); js.execCommand("Copy") ; } </script>
注意: creatTextRange() 方法是 ms-only的方法 非微軟家的不可用,會報錯.
execCommand 方法通常用於控制可編輯的 IFRAME 內容，制作富文本編輯器。 但他現在為止還是非標准的，方法的首參數 Commmands 的可選值由各個瀏覽器廠商制定，支持程度並不統一。
詳細說明:http://www.w3help.org/zh-cn/causes/BX9054
測試各瀏覽支持情況: http://www.w3help.org/tests/BX9054/execCommand_sCommands_Parameters.html
使用例子: http://blog.csdn.net/woshinia/article/details/18664903
打印,另存為等都是通過這個命令
3.好的方案:
Clipboard.js：不用Flash實現剪貼板功能的輕量級JavaScript庫,
主流瀏覽器都支持這個庫，Safari目前仍不支持cut和copy指令,它使用execCommand實現
使用adobe flash 的方式 zeroclipboard http://zeroclipboard.org/ Github用JavaScript庫ZeroClipboard來實現這一功能
或者用 jquery.zclip.js jquery封裝后的 使用例子: http://www.cnblogs.com/linjiqin/p/3532451.html
html5的剪貼板提議仍在進行中 https://w3c.github.io/clipboard-apis/
具體可用情況可以使用這里can i use it? http://caniuse.com/#search=clipboard