首页 技术 正文
技术 2022年11月15日
0 收藏 319 点赞 2,545 浏览 1825 个字

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,501
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,915
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,747
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,505
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,142
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,306