JS 操作复制剪切粘贴

Posted 2020-08-15 永恒的浪荡时光

测试了很多次之后，虽然有点细碎的突破，但还是想说，麻辣隔壁...

 

众所周知使用 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...