标签：data ... query 简单 代码 .com getattr bsp nbsp
测试了很多次之后，虽然有点细碎的突破，但还是想说，麻辣隔壁...
众所周知使用 oncut/oncopy/onpaste 监听剪切板，采用 window.clipboardData 并不是适用于大多浏览器，
某天突然发现事件对象 e 中有个 clipboardData 属性，也就是 e.originalEvent.clipboardData，于是才有了今天的尝试，
然而，依旧问题重重呀...先看一段不太舒服的代码。
$(‘.copy‘).on(‘beforecopy beforecut beforepaste copy cut paste‘, function(e){
var clipboardData = window.clipboardData || e.originalEvent.clipboardData;
switch (e.type) {
case ‘copy‘:
clipboardData.setData(‘text‘, ‘复制我干啥‘);
console.log(clipboardData.getData(‘text‘));
console.log(‘复制:‘+clipboardData.getData(‘text‘));
break;
case ‘beforecopy‘:
clipboardData.setData(‘text‘, ‘改个数据试试‘);
console.log(‘我就是在复制的前面，虽然并没有卵用‘);
break;
case ‘cut‘:
clipboardData.setData(‘text‘, ‘剪切我干啥‘);
console.log(‘剪切:‘+clipboardData.getData(‘text‘));
break;
case ‘paste‘:
clipboardData.setData(‘text‘, ‘粘贴我复制还有用吗‘);
console.log(‘粘贴:‘+clipboardData.getData(‘text‘));
break;
}
});
显然这个操作很不友好，跟玩儿似的，
copy 或 beforecopy 时 setData 了新的内容，对 paste 并不会产生任何影响，
能够在粘贴时对复制的文本进行一定的操作，但显然也只是能在本网页而已，
再者，copy 和 cut 时 getData 是为空的，火狐不支持 beforecopy 方法等...好吧，这特么太鸡肋了。
而对于当年流行的 zeroclipboard.swf 到了今日却不得不放弃了，毕竟屏蔽 flash 小程序的浏览器越来越多。
再后来我就找到了 clipboard.js 这个插件，虽然只有点击才能生效，但我已然是知足的了。
<div class="box">
<textarea id="bar">复制点啥好呢</textarea>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">Copy</button>
</div>
<div class="box">
<button class="btn2" data-clipboard-text="你猜我复制了什么">Copy</button>
</div>
<script src="http://cdn.bootcss.com/clipboard.js/1.5.12/clipboard.min.js"></script>
<script>
var x = new Clipboard(‘.btn‘, {
text: function(trigger) {
return document.querySelector(trigger.getAttribute(‘data-clipboard-target‘)).value + ‘\n\n\n复制来源于博客园‘;
}
});
x.on(‘success‘, function(e){
// e 拥有三个属性,
// action: 类型(‘copy‘|‘cut‘)
// text: 值(‘cut‘时有点小问题)
// trigger: dom元素
console.log(e);
});
x.on(‘error‘, function(e){
console.log(e);
});
var xx = new Clipboard(‘.btn2‘);
</script>
应该还是很好理解的吧，不然那还是看官网吧。
原理好像很简单的样子，主要靠 getSelection 和 createRange 这类东西，
以后再开一章研究下这种复制粘贴的事件启动问题，以及粘贴时自定义化，blabla...
标签：data ... query 简单 代码 .com getattr bsp nbsp
原文地址：http://www.cnblogs.com/foreverZ/p/5978157.html
