JS 操作复制剪切粘贴

时间:2023-01-22 16:52:14

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

 

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