实现思路
- 监听复制事件
- 阻止默认行为
- 获取当前页面网址和用户复制的内容
- 将其整合到同一文本中
- 将整合后的文本内容添加到剪切板中
阻止事件的默认行为我们可以用
e.preventDefault() 语句
获取当前页面地址我们可以用
window.location.href
获取用户复制内容，我们其实可以获取用户选中的文本，从而得到用户想要复制的文本，我们用：
window.getSelection().toString()
window.getSelection()返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。如果用String.toString() 方法，则会返回当前选中的文本内容。
将文本添加到剪切板
e.clipboardData.setData('text/plain',returnText);
实现代码
// 复制小尾巴，保留版权信息
// 监听复制事件
body.addEventListener("copy", (e) => {
// 阻止默认行为
e.preventDefault();
// 获取当前网址和复制的内容
let url = window.location.href;
let copyText = window.getSelection().toString();
// 整合
let returnText =
`${copyText}
原文出自[ ${url} ] 转载请保留原文链接
`
// 将文本添加到剪切板中
e.clipboardData.setData('text/plain',returnText);
});
优化
为了更好的用户体验，我们还应该更进一步的优化一下
如果用户复制内容不多，则不需要添加小尾巴，如果用户复制了大量的文字，则加上小尾巴。
要想实现这个功能其实很简单，加个判断语句就行了，如果要复制的文本长度大于某个长度，则添加小尾巴，否则不添加。
// 复制小尾巴，保留版权信息
// 监听复制事件
body.addEventListener("copy", (e) => {
// 阻止默认行为
e.preventDefault();
// 获取当前网址和复制的内容
let url = window.location.href;
let copyText = window.getSelection().toString();
// 整合，注意弄好格式
let returnText =
`${copyText}
原文出自余烬的小舟 [ ${url} ] 转载请保留原文链接
`
// 如果超出规定长度，则添加小尾巴
if (copyText.length >= 50){
// 将文本添加到剪切板中
e.clipboardData.setData('text/plain',returnText);
}
else {
e.clipboardData.setData('text/plain',copyText);
}
});
注意：
以上一些语法可能不支持旧版本浏览器，如果需要支持，记得做好回退方案。
可以去我的个人博客体验实际效果： 余烬的小舟
