通过JS在复制操作时添加尾巴什么的,常见的思路是利用Selection.selectAllChildren()、window.clipboardData.setData()或者window.execcommand(‘copy’)。比如下面这段代码:

1
2
3
4
5
6
7
8
9
10
11
<p id="my_text">
this is a copy text.
</p>

<script>
document.getElementById("my_text").addEventListener('copy', function(e){
const copy_obj = document.getSelection();
e.clipboardData.setData('text/plain', copy_obj.toString() + "\nCopyright to 2020.");
e.preventDefault();
});
</script>

但复制操作很多时候也会通过双击文本来自动选择,在Chrome浏览器中,双击文本会自动选择分词的文本或标签内的整段文本。在这个操作方式下,还有另外一种简单的办法来添加文本尾巴。上面的例子可以简单写为:

1
2
3
<p id="my_text">
this is a copy text.<span style="font-size:0"> Copyright to 2020.</span>
</p>

只要将添加的文本的font-size设置为0,便可实现文本不可见,双击复制粘贴时会自动添加尾巴的效果。但这种方式只适用于简单的文本添加,而无法实现HTML格式的尾巴。