首页 > 代码库 > js复制内容到剪切板，兼容pc和手机端，支持Safari浏览器
js复制内容到剪切板，兼容pc和手机端，支持Safari浏览器
最近，一些项目中用到监听用户复制。剪切的操作。
Javascript原生有一些事件：copy、paste、cut，
这些事件可以作用的目标元素：
能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素)，或者是<body>
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中的方法监听用户的剪切、复制、粘贴的行为：
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操作，或者右击鼠标—>复制等操作。
Evevt.clipboardData 对象
clipboardData是JavaScript剪切板对象，该对象提供了3个常用方法：
clearData(): clipboardData对象从剪切板删除一种或多种数据格式（一个参数：数据类型）
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="http://www.mamicode.com/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();
js复制内容到剪切板，兼容pc和手机端，支持Safari浏览器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。