标签：listen event 用户 cli select 粘贴 default dev ast
最近，一些项目中用到监听用户复制。剪切的操作。
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="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浏览器
标签：listen event 用户 cli select 粘贴 default dev ast
原文地址：http://www.cnblogs.com/exhuasted/p/7093104.html
