js剪贴板操作
这是一个很有意思的地方,很多不了解的人或者初级的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
