js复制内容到剪切板，兼容pc和手机端，支持Safari浏览器

时间 2019-11-26

标签复制内容剪切板兼容手机支持 safari 浏览器栏目 JavaScript 繁體版

原文原文链接

最近，一些项目中用到监听用户复制。剪切的操做。javascript

Javascript原生有一些事件：copy、paste、cut，java

这些事件能够做用的目标元素：ios

　　能得到焦点的元素 (如contentEditable内容能编辑或者能够选中的元素)，或者是<body>git

 1         <div id="cardList">
 2             <div class="btn">点击我，复制我</div>
 3         </div>
 4         
 5         
 6         
 7         <script type="text/javascript">
 8             
 9             function copy(str){
10                 var save = function (e){
11                     e.clipboardData.setData('text/plain',str);//下面会说到clipboardData对象
12                     e.preventDefault();//阻止默认行为
13                 }
14                 document.addEventListener('copy',save);
15                 document.execCommand("copy");//使文档处于可编辑状态，不然无效
16             }
17                     
18             document.getElementById('cardList').addEventListener('click',function(ev){
19                  copy(ev.target.innerText)
20             })
21                 
22         </script>

使用jQuery中的方法监听用户的剪切、复制、粘贴的行为：github

1 $("#cut").on("cut",function(){
2    alert("剪切");
3 });
4 $("#copy").on("copy",function(){
5    alert("复制");
6 });
7 $("#paste").on("paste",function(){
8    alert("粘贴");
9 });

这些行为包括使用键盘的ctrl + c操做，或者右击鼠标—>复制等操做。chrome

Evevt.clipboardData 对象浏览器

clipboardData是JavaScript剪切板对象，该对象提供了3个经常使用方法：spa

　　clearData(): clipboardData对象从剪切板删除一种或多种数据格式（一个参数：数据类型）firefox

　　getData(): clipboardData对象从剪切板获取指定格式的数据（一个参数：数据类型）插件

　　setData(): clipboardData对象赋予指定格式的数据（两个参数：数据类型，要赋予的值）

　　*数据类型通常为“"text/plain" ”

Evevt.clipboardData 对象兼容性问题

　　通过尝试，clipboardData对象内兼容大部分px浏览器，像chrome，firefox、ie等，可是在手机端兼容性不是很好，

　　目前clipboardData在ios上的safari浏览器无效，为解决移动端这个问题，咱们引用一个js插件——clipboard.js

　　clipboard.js依赖于HTML5推出的Selection API和execCommand API

　　使用：

　　在页面中引入

1 <script src="clipboard.min.js"></script>

　　使用clipboard.js的自定义属性

 1 　　　　 <!--使用data-clipboard-target属性指定被复制的标签-->
 2         <!--使用data-clipboard-action属性指定一些操做，copy（复制），cut（剪切）-->
 3         <!--注意：cut 操做仅适用于<textarea>和<input>-->
 4         <div style="margin:2em">
 5             <textarea id="id_text"></textarea>
 6             <button type="button" id="id_copy"
 7                     data-clipboard-target="#id_text"
 8                     data-clipboard-action="copy">点击复制
 9             </button>
10         </div>

1 　　 var clipboard = new Clipboard("#id_copy");
2         clipboard.on("success",function (element) {//复制成功的回调
3             console.info("复制成功，复制内容：    " + element.text);
4         });
5         clipboard.on("error",function (element) {//复制失败的回调
6             console.info(element);
7         })
8     });

　　高级用法

1 　　 //清理Clipboard对象
2     var clipboard = new Clipboard('.btn');
3     clipboard.destroy();