今天遇到了粘贴文章所有内容用户剪切板要添加属于自己附加的内容到用户的剪切板,于是学习了浏览器剪切板事件
<div class="source" contenteditable="true">复制的文本...</div>
<div class="target" contenteditable="true">然后粘贴到这个</div>
<div class="target1" contenteditable="true">然后粘贴到这个(paste事件)</div>
const source = document.querySelector('div.source');
const target1 = document.querySelector('div.target1');
//addEventListener 事件监听器
source.addEventListener('copy', (event) => {
console.log('copy事件被执行了');
//setData() 方法用来设置拖放操作的drag data到指定的数据和类型。
event.clipboardData.setData('text/plain', '当用户通过浏览器UI(例如,使用 Ctrl/⌘+C 键盘快捷方式或从菜单中选择“复制”)启动复制操作并响应允许的document.execCommand(\'copy\')调用时触发copy事件。');
event.preventDefault();//阻止默认事件
});
source.addEventListener('cut', (event) => {
console.log('cut事件被执行了');
event.clipboardData.setData('text/plain', '我设置剪切事件到剪切板的内容');
event.preventDefault();//阻止默认事件
});
target1.addEventListener('paste', (event) => {
let paste = (event.clipboardData || window.clipboardData).getData('text');
paste = paste.toUpperCase();
const selection = window.getSelection();
if (!selection.rangeCount) return false;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));
event.preventDefault();
});