前端开发攻略---在页面上读取/修改剪切板内容、修改复制内容、复制图片、禁止复制。clipboard API详细介绍。

最新推荐文章于 2024-05-10 16:19:48 发布

bbamx.

最新推荐文章于 2024-05-10 16:19:48 发布

阅读量814

点赞数 19

分类专栏：前端开发攻略文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/nibabaoo/article/details/137680762

版权

前端开发攻略专栏收录该内容

44 篇文章 0 订阅

订阅专栏

1、读取剪切板内容

使用场景

内容分析与识别: 比如说你在微信复制了一段好友分享给你的来自抖音或者淘宝的商品信息，然后前往抖音或者淘宝会自动弹出来对应的商品页面。

数据处理与转换: 可以读取剪切板中的数据进行处理和转换。例如，将从剪切板中读取的文本数据转换为特定格式的对象或数据结构，以便在应用程序中进一步处理。

剪切板监控: 通过定时或事件触发的方式监控剪切板的内容变化。这对于实现自动化任务或特定行为的触发很有用。例如，当用户复制特定类型的数据时，可以触发相应的操作或提醒。

数据导入: 在一些应用程序中，用户可能需要从外部来源导入数据。读取剪切板的内容可以作为一种简便的方式，允许用户将数据从其他应用程序中快速粘贴到当前应用程序中。

粘贴功能增强: 在网页应用程序或桌面应用程序中，可以读取剪切板的内容以实现粘贴功能的增强。例如，在用户粘贴文本时，可以对文本进行格式化、验证或其他处理。

演示代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
     <div class="editor"></div> 
  </body>
  <script>
     navigator.clipboard.readText().then(text => {
       document.querySelector('.editor').innerHTML = '从其他地方复制的内容:' + text
     })
  </script>
</html>
navigator.clipboard.readText()返回的是promise，因为这个读取是设计到用户隐私的。因此当用户第一次访问你的站点时，会问你是否允许这个站点读取你的剪切板允许了之后这个promise才会完成。拿到文本之后才能做你想做的事情。

2、修改剪切板内容

使用场景

自定义复制操作：在特定场景下，可能需要用户复制特定格式的数据，前端可以通过修改剪切板内容来实现自定义的复制操作。比如在CSDN上面复制代码时，粘贴时会带上作者的个人信息以及文章地址。

富文本编辑器：当用户复制粘贴富文本内容时，可以通过前端代码拦截并修改剪切板内容，以确保粘贴的内容符合编辑器的格式要求。

数据格式化：将剪切板中的数据格式化为特定的结构，以便在粘贴到应用程序中时能够轻松地解析和处理。

图像处理：在网页上进行图像编辑时，可以通过JavaScript捕获并修改剪切板中的图像数据，以便在粘贴时应用特定的处理或转换。

安全性控制：在复制敏感信息（如密码）时，前端可以拦截并清除剪切板内容，以增加安全性。

表单处理：在表单提交之前，可以通过JavaScript修改剪切板内容，以便在用户粘贴时自动填充表单字段。

演示代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
     <input type="text" /> <button>复制</button> 
  </body>
  <script>
     const btn = document.querySelector('button')
     const ipt = document.querySelector('input')
     btn.addEventListener('click', function () {
       navigator.clipboard.writeText('版权所有' + ipt.value + '版权所有')
     })
  </script>
</html>

3、禁止复制

使用场景

版权保护：某些网站或应用程序可能会禁止复制其内容，以保护知识产权和版权。

保密信息：在某些情况下，网站或应用程序可能包含敏感信息，如个人身份信息、商业机密或机密文件，因此禁止复制以防止信息泄露。

学术资源：一些学术资源或研究论文可能限制了对其内容的复制，以维护学术诚信和版权。

数字版权保护：为防止盗版和未经授权的使用，一些数字内容提供商可能会限制对其内容的复制。

安全性：在一些在线银行或支付平台等安全性要求较高的网站上，禁止复制内容可以减少潜在的安全风险，如防止恶意软件获取敏感信息。

演示代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio reiciendis quidem neque obcaecati fuga illo, aspernatur amet dolore velit
      sit consectetur aperiam adipisci dolores, suscipit doloremque mollitia odio provident corrupti?
    </div>
  </body>
  <script>
    document.addEventListener('copy', e => {
      // 阻止默认行为 不准复制
      e.preventDefault()
      // 手动往剪贴板里面写入一段文本
      navigator.clipboard.writeText('不准复制,给我打钱！！！')
    })

  </script>
</html>

4、复制图片

使用场景

图像展示：网页中需要展示一些图像，比如产品图片、用户头像等，开发者会将这些图片嵌入到页面中以供用户浏览。

交互设计：一些网页可能需要用户上传图片，比如社交媒体平台的头像上传、在线编辑工具的素材上传等，开发者需要处理用户上传的图片并在页面上显示。

图像操作：一些网页应用可能涉及对图片进行操作，比如裁剪、旋转、添加滤镜等，开发者需要在页面上展示原始图片并实现相关的图像操作功能。

数据可视化：在数据可视化的场景中，开发者可能需要将图表、地图等以图片形式嵌入到页面中，以展示数据分析结果或地理信息。

广告展示：网页中的广告通常以图片形式呈现，开发者需要将广告图片嵌入到页面中，并可能需要实现点击跳转等交互功能。

演示代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .imgContainer {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="imgContainer" contenteditable></div>
  </body>
  <script>
    const imgContainer = document.querySelector('.imgContainer')
    imgContainer.addEventListener('paste', e => {
      if (e.clipboardData.files.length > 0) {
        e.preventDefault()
        const file = e.clipboardData.files[0]
        const reader = new FileReader()
        reader.onload = e => {
          const img = document.createElement('img')
          img.src = e.target.result
          imgContainer.appendChild(img)
        }
        reader.readAsDataURL(file)
      }
    })
  </script>
</html>

contenteditable：这个属性表示这个div是可编辑的。

bbamx.

关注

19
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发攻略---在页面上读取/修改剪切板内容、修改复制内容、复制图片、禁止复制。clipboard API详细介绍。

Clipboard API允许网页通过JavaScript访问用户的剪贴板，从而实现复制和粘贴操作。简单来说，它允许你的网页应用程序与用户的剪贴板进行交互，使得用户可以方便地复制文本、图像或其他数据，并在需要时粘贴到其他地方。这为用户提供了更流畅的体验，同时也增强了网页应用程序的功能性。
复制链接

扫一扫