JS 操作复制剪切粘贴

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

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

秒客网

JS 操作复制剪切粘贴 - 永恒的浪荡时光

JS 操作复制剪切粘贴

相关文章