logo

如何实现，用户在网页拷贝时，添加版权后缀？

作者
Modified on
Reading time
1 分钟阅读:..评论:..

要在用户从网页复制文本时添加一段自定义的后缀，可以监听copy事件，并在该事件的处理函数中修改剪贴板中的内容。这里给出一个使用TypeScript实现的示例： 首先，需要一个HTML页面作为起点。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy Example</title>

</head>

<body>
    <p>这是一段测试文本，试着复制我，看看剪贴板里会发生什么。</p>

    <script src="app.ts" type="module"></script>

</body>

</html>

然后，使用TypeScript编写您的脚本app.ts，实现在复制操作时添加后缀的逻辑：

document.addEventListener('copy', (event: ClipboardEvent) => {
  // 获取用户选择的文本
  const selection = document.getSelection();
  const selectedText = selection ? selection.toString() : '';

  // 检查选择的文本是否超过一定字数，这里以超过10个字符为例
  if (selectedText.length > 10) {
    // 自定义的后缀内容
    const suffix = `
原文链接：*****
作者：*****
版权所有，侵权必究`;

    // 修改剪贴板中的内容
    const newText = selectedText + suffix;
    event.clipboardData?.setData('text/plain', newText);

    // 阻止默认的复制行为
    event.preventDefault();
  }
});

这段代码会在文档上添加一个监听器，监听copy事件。当用户执行复制操作时，检查所选文本的长度。如果长度超过了10个字符（您可以根据需要调整这个阈值），则在所选文本后附加一段自定义的后缀内容，并通过event.clipboardData.setData方法将这个新文本设置到剪贴板中。 最后，通过event.preventDefault()阻止默认的复制行为，以确保剪贴板中的内容是修改后的版本。

< MIME 类型是什么？
前端进阶必须会的Zod ！ >