[剪贴板总结] oncopy, onpaste的一些细节

November 13, 2017
先贴代码:
 $(document.body).bind({
    copy: function(e) {
        var clipboardData = window.clipboardData; //for IE
        if (!clipboardData) { // for chrome
            clipboardData = e.originalEvent.clipboardData;
        }
        console.log(clipboardData.getData('text/plain')); // 总是返回""
        clipboardData.setData('text/plain', 'starcloudy');// 可以设置成功
        console.log(clipboardData.getData('text/plain')); // 返回starcloudy
        e.preventDefault(); // 相当于你不能从body上拷贝内容了
    },
    paste: function(e) {
        var clipboardData = window.clipboardData; // IE
        if (!clipboardData) { //chrome
            clipboardData = e.originalEvent.clipboardData;
        }
        console.log(clipboardData.getData('text')); // 这里可以获取starcloudy
        e.preventDefault();  // 这里相当于不会粘贴内容到光标处了
    }
});

总结以下几点, 在chrome下:

1、 oncopy事件,你在callback函数里面是获取不到复制的内容的,因为是复制的动作还没有去做。
2、 oncopy事件,加了e.preventDefault(),阻止默认行为之后,复制的动作就不会做了。
3、 oncopy事件,在这里是可以修改剪贴板的值的,但是并没有卵用,因为这个时候剪贴板的值不是你希望的值。触发这个事件的时候获得的内容总是空字符串。

4、 onpaste事件,你在callback内容可以获取剪贴板的内容
5、 onpaste事件,but,你是不能修改剪贴板内容的。
6、 onpaste事件,你同样可以通过e.preventDefault()去阻止剪贴板的默认动作。

PS: 反正浏览器的权限是很小的,剪贴板的热点内容更改也不会让你乱动
那么你可以做什么?

1、你可以防止用户拷贝你页面的内容
2、你可以定制你想让用户拷贝的内容,定制的并不是剪贴板系统默认拷贝的,仅仅是你自己给的内容。