今天来学习下剪贴板事件

这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

前言

昨天学习了鼠标事件，今天来学习下剪切板事件。

介绍

剪切板事件有三个事件，复制事件（copy）, 剪切事件（cut）, 粘贴事件（paste）。

复制事件

复制事件，顾名思义，就是你在复制的时候会触发的事件。

复制的操作一般就是选中内容，然后ctrl + c(mac下是command + c)或者右键菜单点击复制。

这些操作都会触发复制事件。

  <div class="content">
    你好，我是答案cp3！
  </div>
  <script>
    const div = document.querySelector('.content')
    div.addEventListener('copy', () => {
      console.log('我是copy事件')
    })
  </script>

一般我们监听复制事件，我们是想在复制的内容的基础上，加上我们的内容。

比如你在掘金复制一段代码，在控制台粘贴的时候，会出现一段提示语：

这种就是通过监听复制事件来改写复制的内容实现的。

我们先通过复制事件的事件对象来打印看看

可以看到有个clipboardData属性。它原型上有setData方法，这个是设置剪切板的内容的。

setData方法支持两个参数

setData(format, data)

第一个是需要复制的内容类型，文本（text/plain）或者html（text/html）等等
第二个是内容，字符串类型。

然后可以通过document.getSelection().toString()来获取选择的文本。

一定要阻止复制的默认事件，不然我们的内容是无法加上的。

完整代码：

  <div class="content">
    你好
  </div>
  <script>
    const div = document.querySelector('.content')
    div.addEventListener('copy', (e) => {
      // 阻止复制的默认事件
      e.preventDefault()
      const selection = document.getSelection()
      // 把文本设置到剪切板中
      e.clipboardData.setData('text', selection.toString() + '，我是答案cp3！')
    })
  </script>

复制你好，然后在控制台粘贴。

cut事件

剪切事件，就是你对你选中了内容剪切时候触发的事件。一般是用在input,textarea, contenteditable为true的元素标签上。

  <input type="text" value="你好，我是答案cp3！">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('cut', (e) => {
      console.log('我是cut事件')
    })
  </script>

clipboardData的用法和复制事件的一样，这里不做赘述，可以参考上面的复制事件。

paste事件

粘贴事件，就是你复制了或者剪切了内容，然后粘贴的时候触发的事件。

主要是要读取粘贴板的内容，同理也是用到clipboardData对象。

它有以下属性

types：数组类型，代表复制内容的类型列表，值有text/plain, text/html, Files等等。

items：复制内容的列表，列表的每一项包含kind和type属性。

kind: 复制内容的类型，一般为string或者file等
type: 复制内容的MIME-Type类型，一般为image/png, text/plain, text/html等

items上还有 getAsFile()（返回文件对象）, getAsString(fn)（fn的参数是复制的文本）等方法

files：数组类型，复制文件的列表，每一项都是file对象。

它还有getData(format)方法，获取复制的内容，format是复制内容的类型，比如text/plain, text/html等

一个简单的例子：

  <input type="text">
  <script>
    const input = document.querySelector('input')
    input.addEventListener('paste', async (e) => {
      const items = e.clipboardData.items
      console.log(e.clipboardData.types)
      for (let i = 0; i < items.length; i++) {
        if (items[i].kind === 'string') {
          items[i].getAsString((str) => {
            console.log(str)
          })
        }
        // 对复制的文件的处理
        if (items[i].kind === 'files') {
        }
      }
    })
  </script>

复制的纯文本：

复制的html：

从vscode里面复制：

总结

上面就是剪贴板事件的相关知识，大家感兴趣可以动手敲敲，学习学习。

感谢你们的阅读。