JS实现复制粘贴的方式

最近在项目中遇到了需要复制粘贴的功能，虽然是个简单的小功能，我竟然没做过，所以根据查找的资料还有实践在这里总结一下；

JS实现复制粘贴方式：

原生通过document.execCommand(‘copy’)的方式实现
使用第三方框架clipboard的方式实现
IE大神

一、execCommand方式

document.execCommand(),文档对象的 execCommand方法允许运行命令来操纵可编辑区域的内容，具体可以查看这里。
只需要选中要复制的内容，执行document.execCommand(‘copy’, false, null)就好了。execCommand里可以跑很多例如paste等方法，第一个参数是方法名，第二个是是否展示默认ui，第三个是可选参数列表，对copy来说后两个都用不到。
这个方法指拷贝当前选中内容到剪贴板，返回值为一个 bool 值，如果返回值为 false 则表示操作不被支持或未被启用。
很遗憾的是这个方法的浏览器兼容性一般，IE 仅支持 8 以上的版本。
主要是通过 class和id 来复制 a标签中的 href，把复制好的内容放到生成的input标签中，然后复制结束把 input标签给remove。
第一次点击不生效，需要点击两次，暂时不解决（我没有遇到）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>constructor-nodelist</title><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button class="copy_file" onclick="copyText('copy_file')">点我复制</button>
<a id="copy_file" href="复制内容"></a>
function copyText(file) {const btn = document.querySelector('.'+file);var copy_val = document.getElementById(file)var copy_file = copy_val.getAttribute("href");btn.addEventListener('click',() => {const input = document.createElement('input');document.body.appendChild(input);input.setAttribute('value', copy_file);input.select();if (document.execCommand('copy')) {document.execCommand('copy');alert("复制成功！","success");}document.body.removeChild(input);})
}
</script>
</body>

// 项目中工具函数的用法
export const copy = function(value) {return new Promise(resolve => {let copyTextArea = nulltry {copyTextArea = document.createElement('textarea')copyTextArea.style.height = '0px'copyTextArea.style.opacity = '0'copyTextArea.style.width = '0px'document.body.appendChild(copyTextArea)copyTextArea.value = valuecopyTextArea.select()document.execCommand('copy')resolve(value)} finally {if (copyTextArea && copyTextArea.parentNode) {copyTextArea.parentNode.removeChild(copyTextArea)}}})
}

二、clipboard方式

主要是看文档实现复制，粘贴，剪切等功能。
clipboard和Fastclick冲突，导致点击两次才能复制。解决方案：加一个名为“needsclick”的类名<button id="copyDom" class="needsclick ">点击复制</p>

methods: {initClipboard (copyDom) {let clipboard = new Clipboard(copyDom, {text: function () {return document.getElementById(copyDom).innerText;}});clipboard.on('success', function (e) {console.log('Action:', e.action);console.log('Text:', e.text);console.log('-- 复制成功 --');e.clearSelection();});clipboard.on('error', function (e) {console.log(e);});},// 点击复制initCopyDom () {this.initClipboard('#copyDom');},
}

三、IE

其他浏览器出于安全的考虑禁止js访问操作系统粘贴板;

if(window.clipboardData){//清空操作系统粘贴板window.clipboardData.clearData();//将需要复制的内容复制到操作系统粘贴板  window.clipboardData.setData("Text", "要复制的内容");
}

四、有问题会继续更新

JS实现复制粘贴的方式相关推荐

js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 初步想法: 1. 获取到需要复制的内容,这里我可以将需要复制的内容放在input或者t ...
JS一键复制粘贴功能
使用clipboard.js 实现: 它是一个不需要Flash,就能实现文本复制或者剪切到剪切板的轻量级插件: 具体实例: 可以使用cdn 或者直接下载设置好引用路径. <!DOCTYPE h ...
js html table转excel文件 js获取(复制 / 粘贴板)的内容js复制table粘贴到excel中
js html table转excel文件参考资料: 70行代码实现vue+sheetJs导出excel功能 sheetJs的git项目代码代码太长建议直接粘贴复制 <!DOCTYPE ht ...
最新js实现复制粘贴功能实例
功能:实现鼠标点击复制内容描述:使用与手机网站.pc等端. 实现点击复制粘贴功能的代码实例: function common_copy(text){if(text.indexOf('-') !== ...
怎么使用JS禁止复制粘贴
1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...
利用JS实现复制/粘贴功能
1.最基本的复制 Java代码 <script language="javascript"> function readTxt() { alert(window.cli ...
js修改复制粘贴板上的内容（从网页复制表格的时候多复制了一行）
//在didmount生命周期里监听复制事件componentDidMount() {window.document.addEventListener("copy", this.c ...
js 禁止复制粘贴全选
// 取消右键菜单 document.oncontextmenu = function(e){ var t = e || window.event; var elm = t.target || t.s ...
Auto.js实例复制粘贴
setClip("陌路天籁")toast(getClip())paste()

JS实现复制粘贴的方式

JS实现复制粘贴方式：

一、execCommand方式

二、clipboard方式

三、IE

四、有问题会继续更新

JS实现复制粘贴的方式相关推荐

最新文章

热门文章