jquery或js复制/ 粘贴事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery或js复制/ 粘贴事件相关的知识，希望对你有一定的参考价值。
如何实现以下功能：
1.点击复制 复制“文件”
2.点击粘贴 “文件”显示在textarea 里
<body>
<div id="cpy">复制</div>
<div id=""past>粘贴</div>
<div id="txt">文本</div>
<textarea name="" cols="" rows=""></textarea>
</body>
$("#cpy").click(function()//注册复制的点击事件
alert('复制成功！');//因为根本就不用复制功能只是一个从txt_div中取值的过程
);
$("#past").click(function()
$("textarea").val($("#txt").text());
alert('粘贴成功！');
);追问
谢谢您！
您的办法很好。
如果textarea 里已经有文字了，有没有办法实现文字粘贴到光标处 （并且可能光标前后都有文字呢）
有是肯定有的，就是麻烦点儿，我的思路是：可以先从网上找到一个获取光标位置的脚本方法（这个网上肯定有，我用过，就是记不清从哪里找的了），然后将textarea的值取出付给一个变量txt，根据光标位置截取txt的前半部分在拼上粘贴的文本再拼上txt的后半部分，最后将拼接好的字符串再赋值给textarea。。。
参考技术A jquery有一个clone（）的事件可用，有用js写的复制到剪切板方法，百度搜一下。不过只能支持IE系列，webkit内核是不支持此操作的，就跟“加入收藏”的功能一样，无法解决！本回答被提问者和网友采纳 参考技术B 复制文件？哪里的文件？ 问问题时问清楚。追问id为txt 的 我上面有说啊
追答不，我觉得你没说，你好好看看……
文本框中光标定位的问题，参考这篇文章。http://www.nowamagic.net/librarys/veda/detail/1266
js实现网页内自定义粘贴板
参考技术A 很酷吧，相信经常在网上复制粘贴的人应该不陌生，我也是经历过，觉得很神奇，所以就寻思着是不是也在自己的博客里面也实现这个功能，经过一番查资料于研究，我总算弄明白了其中的原委，并实际应用于我的博客，你可以复制我粘贴试试，觉得酷的话就可以往下接着看了！下面来看一下实现过程。这里说明一下，浏览器版本较低的话可能`addEventListener()`不支持，特别是IE浏览器，IE8以前包括IE8的版本都不支持此方法。当用户选中某段内容时window.getSelection()获取一个Selection对象，将这个`objSelection.tostring()`，就是选中区的内容，这里可以用` var selectionString = window.getSelection().toString()`在控制台查看，能在控制台查看说明我们就可以通过js获取到，selectionString + '自定义内容'，到这里复制的原内容我们就有了。这里我们要创建一个DOM容器来存`objSelection.tostring()`，最好是可以换行的，如p、div、textarea等。
当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素，这里主要用其中的copy命令来实现复制功能，听说插件Clipboard.js也是调用这个方法实现复制功能的`bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)`，第一个参数是命令的名称，字符串类型，后两个参数我们可以不用，返回bool值，如果是 false则表示操作不被支持或未被启用命令只介绍用到的copy命令:
> copy：拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
这是很重要的一步，这是复制内容的关键命令。这里我们只需要在正确的时间执行`document.execCommand('copy')`即可。
addEventListener()方法用于向指定元素添加事件句柄，这里我就抛开文档，就针对本次功能对这个HTML DOM方法进行通俗的解释了，这里主要用来规定我们自定义复制功能的有效DOM范围，来个例子：
//body中有<div id="test">content</div>
var el = document.getElementById('test');
el.addEventListener('copy', function (e)
// 触发copy事件后的处理
这个例子中我们实现的功能将只在id为test的DOM元素里有效，其它地方将恢复默认复制功能。
Range表示包含节点和部分文本节点的文档片段。用`var range = document.createRange()`方法创建，这里面为什么要创建Range呢，主要是用来存储Selection对象的开始位置和终点位置，因为我们是要阻止默认的copy事件，让copy的内容是用户选中的内容加上我们自定义的内容，再将这个内容放入粘贴板，形成最终的粘贴内容。`document.createRange`得到是还没有放内容的片段，我们我们还会用到`Range.setStart()`设置Range的起点和`Range.setEnd()`设置Range的终点。最终`selectionObj.removeAllRanges()`将selectionObj中的默认Range 去掉，`selectionObj.addRange(range)`,粘贴板就有了，不出意外去粘贴就会有选中的内容加自定义的内容了。
源码可以联系作者。这里有个特别注意的点，如果是原生js的话直接调用函数就可以，如果是vuejs的话图片中可以看到，我是在mounted()钩子函数里调用，而不是在created()钩子函数里调用，这里一定不能在created()钩子函数里调用，为什么呢？
因为created()执行的时候一般是在html渲染前的操作，此时el还是undefined，所以执行getElementById()就会报错，created()适合做html渲染前的数据初始化工作。而mounted()一般是在html渲染完成后的操作，此时el，data都已经加载完成，一般对dom的操作都写在mounted中，这是个要注意的点，喜欢的话就给作者点个心，谢谢
以上是关于jquery或js复制/ 粘贴事件的主要内容，如果未能解决你的问题，请参考以下文章
js/jquery 如何判断当前是不是具有某个事件 比如说是不是具有hover事件
有没有类似 select2 支持下拉多选，同时又可批量复制粘贴的控件
同时绑定onpropertychange 和 oninput 事件，实时检测 inputtextarea输入改变事件，支持低版本IE，支持复制粘贴