首页 技术 正文
技术 2022年11月8日
0 收藏 407 点赞 1,399 浏览 2167 个字

IE浏览器支持直接读写剪切板内容:

 window.clipboardData.clearData();
window.clipboardData.setData('Text', 'abcd');

但是这种方式不安全,很容易泄露用户的隐私,所以现在浏览器如chrome都不支持这种方式了。

读取系统剪切板

查了很多资料,如果是粘贴系统剪切板内容,前提是先去读取系统剪切板内容。

获取事件对象:粘贴事件提供了一个clipboardData的属性,如果该属性有items属性,那么就可以查看items中是否有图片类型的数据了。但是不支持文件夹复制图片word等文件,可以赋值文本文字内容和截图内容。

         //覆盖浏览器粘贴事件
document.addEventListener('paste', function (e) {
var clipboardData = e.clipboardData;
if (!(clipboardData && clipboardData.items)) {//是否有粘贴内容
return;
}
for (var i = 0, len = clipboardData.items.length; i < len; i++) {
var item = clipboardData.items[i];
if (item.kind === "string" && item.type == "text/plain") {
item.getAsString(function (str) {
// str 是获取到的字符串,创建文本框
//处理粘贴的文字内容
})
} else if (item.kind === "file") {//file 一般是各种截图base64数据
var pasteFile = item.getAsFile();
// pasteFile就是获取到的文件
var reader = new FileReader();
reader.onload = function (event) {
var base64Img = event.target.result;
}; // data url
reader.readAsDataURL(pasteFile);
}
var copy_content = e.clipboardData.getData('text/plain');
}
})

写入系统剪切板

查找到的资源都是在事件对象中直接setData,但是实际测试是没有效果的。

e.clipboardData.setData('text/plain', defaultText);

以下提供两种实测有效的设置方式:

1)监听copy事件,触发copy命令

ctrl+C监听按键后如果直接设置event.clipboardData.setData 是无法生效的,必须通过触发copy命令后写入clipboardData。

但是要记得removeEventListener,否则影响自己应用其他地方的copy。

        document.addEventListener("paste", function (e) {
console.log(e.clipboardData.getData("text"));
});
document.onkeydown = function (e) {
if (e.ctrlKey && e.keyCode == 67) {//ctrl+C
function handler(event) {
event.clipboardData.setData('text/plain', "自定义复制内容");
document.removeEventListener('copy', handler, true);
event.preventDefault();
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}
}

2)通过将需要复制的内容赋值到文本中,将文本框内容选中,执行copy命令

  <textarea readonly id="copy_text" style="position:absolute;left:-9999px"></textarea>
         //复制
document.onkeydown = function (e) {
if (e.ctrlKey && e.keyCode == 86) {//ctrl+V
var cloneActiveElement = "需要复制的内容";
var copyText = document.getElementById("copy_text");
copyText.innerHTML = cloneActiveElement;
copyText.readOnly = false;
copyText.select();
copyText.setSelectionRange(0, copyText.value.length);
document.execCommand("copy");
copyText.readOnly = true;
}

参考:

复制粘贴的高级玩法

https://ruby-china.org/topics/17266

http://www.cnblogs.com/beileixinqing/p/7484883.html

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