我们在网上复制别人代码的时候经常会出现下面这种情况
function setClipboardText(value) {
const text = document.createElement('textarea');
text.value = value;
document.body.appendChild(text);
————————————————
版权声明:本文为CSDN博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_40794973/article/details/118644147
网站都会给自己家做个小广告,增添一些内容,今天就来小小实践一下,上html
<template>
<h1>测试复制黏贴功能</h1>
<div class="codeView" @copy="copy($event)">
<p>就是那个复制黏贴的时候会把网址和作者带上的功能</p>
<p>--------下面是我们的测试文字-------------</p>
<h1>挖阿萨达</h1>
<p>阿萨擦爱上大大大大是成分其实擦擦擦擦重庆市擦擦擦</p>
<p>模拟年的上传参数参数大声读出参数的测试动词三单从</p>
</div>
</template>
非常简单的小盒子,我们给copy加上了copy事件,然后传入了event参数,当然你也可以选择给整个页面添加copy事件
<script lang="ts" setup>
import { ref } from 'vue'
let author = ref<string>("作者:黄烽")
let shuoming = ref<string>("版权所有,盗版必究,你复制黏贴的时候看着办")
let copy = (e: ClipboardEvent) => {
e.preventDefault() //一定要阻止默认行为,否则不会显示自定义的内容,当然你可以在标签里面使用.prevent修饰符
// 获取我选中的内容,然后字符串化
let selectPart = window.getSelection()?.toString()
// 对选中内容进行魔改,添加自己的内容
let myContent = `${selectPart}\n${"——————————————"}\n${author.value}\n${window.location.href}\n${shuoming.value}`
console.log(myContent);
// 设置剪切板的数据
e.clipboardData?.setData('text/plain', myContent)
}
</script>
然后你复制的内容就会变成这样
挖阿萨达
阿萨擦爱上大大大大是成分其实擦擦擦擦重庆市擦擦擦
模拟年的上传参数参数大
——————————————
作者:黄烽
http://localhost:3000/#/TestView15
版权所有,盗版必究,你复制黏贴的时候看着办
当然,还是有一些问题需要解决的,比如
getSelection和clipboardData在不同的浏览器中可能有兼容问题
其他浏览器可能支持对文本的多选
如果复制的内容中有图片应该如何处理
只是一个chrome上的小小的尝试