Chrome浏览器读写系统剪切板
编辑:浏览器知识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; }
参考:
http://www.liulanqi.cc/13512.html
http://www.liulanqi.cc/13511.html
http://www.liulanqi.cc/13508.html
加载全部内容