一文掌握：Clipboard API ，让前端顺畅操作剪贴板，无论怎么复制，都显示你网站信息。

一、Clipboard API是什么

Clipboard API 是一个 Web API，它提供了一种在网页上读取和写入剪贴板内容的方式。通过 Clipboard API，网页可以访问用户的剪贴板，从中读取文本、图像或其他数据，并且可以将数据写入剪贴板，以便用户可以将其粘贴到其他应用程序中。

Clipboard API 提供了以下几种主要方法和事件：

1. navigator.clipboard.readText() 和 navigator.clipboard.writeText()：这两个方法分别用于从剪贴板中读取文本和向剪贴板中写入文本。
2. navigator.clipboard.read() 和 navigator.clipboard.write()：这两个方法用于读取和写入剪贴板中的任意类型的数据，如图像、富文本等。
3. clipboard.onchange 事件：这个事件在剪贴板的内容发生变化时触发，可以用来监控剪贴板内容的变化。

通过使用 Clipboard API，网页可以更方便地与用户的剪贴板进行交互，实现更加灵活和便捷的剪贴板操作。不过需要注意的是，由于安全和隐私考虑，浏览器在使用 Clipboard API 时可能会有一些限制，例如需要用户授权或者只能在安全的环境下才能操作剪贴板。

---

二、禁止复制

在网页上禁止用户复制文本可以通过JavaScript来实现。以下是一个简单的示例代码：

document.addEventListener('copy', function(e) {
  e.preventDefault();
});

这段代码监听了页面上的复制事件，并在事件发生时调用了 e.preventDefault() 方法，这样就会阻止默认的复制行为，从而实现了禁止复制文本的效果。

需要注意的是，尽管可以通过JavaScript来禁止复制文本，但这种做法并不符合通常的用户体验。用户通常希望能够自由地复制网页上的内容，因此在实际应用中，应该谨慎使用禁止复制的功能，以免影响用户体验。

---

三、复制网页一段文字后面加上，来自头条@贝格前端工场

在网页上复制一段文字并在后面加上特定内容，可以通过JavaScript来实现。以下是一个简单的示例代码：

document.addEventListener('copy', function(e) {
  e.clipboardData.setData('text/plain', window.getSelection() + '，来自头条@贝格前端工场');
  e.preventDefault();
});

这段代码监听了页面上的复制事件，当用户复制文字时，会自动在复制的内容后面添加上"，来自头条@贝格前端工场"，然后将整个带有添加内容的文本放入剪贴板中。这样，用户在粘贴时就会看到带有特定内容的文本。

需要注意的是，由于浏览器的安全策略，一些浏览器可能会阻止对剪贴板的直接操作，因此在实际应用中可能会受到一些限制。

---

四、复制图片到网页中

在网页中实现本地复制图片到网页中，可以通过以下步骤实现：

1. 创建一个包含<input type="file">的HTML元素，用于选择本地图片文件。

<input type="file" id="fileInput">

1. 监听文件选择事件，获取选择的图片文件，并将其显示在网页中。

document.getElementById('fileInput').addEventListener('change', function(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    var img = new Image();
    img.src = e.target.result;
    document.body.appendChild(img); // 将图片添加到网页中
  };
  reader.readAsDataURL(file);
});

这段代码中，当用户选择了本地的图片文件后，会触发change事件，然后通过FileReader对象读取图片文件，并将其显示在网页中。

需要注意的是，由于安全性的考虑，浏览器通常会限制对本地文件的访问，因此在实际应用中可能会受到一些限制。

---

五、无论复制什么，都显示来自头条@贝格前端工场

在网页中实现无论复制什么都显示特定内容的功能，可以通过监听复制事件，然后修改剪贴板中的内容来实现。以下是一个简单的示例代码：

document.addEventListener('copy', function(e) {
  var originalText = window.getSelection().toString(); // 获取用户选择的文本
  var newText = originalText + '，来自头条@贝格前端工场'; // 在用户选择的文本后面添加特定内容

  e.clipboardData.setData('text/plain', newText); // 将修改后的文本放入剪贴板
  e.preventDefault(); // 阻止默认的复制行为
});

这段代码监听了页面上的复制事件，当用户复制任何内容时，会自动在复制的内容后面添加"，来自头条@贝格前端工场"，然后将整个带有添加内容的文本放入剪贴板中。这样，用户在粘贴时就会看到带有特定内容的文本。