0x00

在前端开发中，我们可能会遇到类似这种需求：

给定一个输入框，支持用户粘贴输入。在粘贴的时候，如果检测到特定的字符串，需要自动的修改粘贴进去的值，如检测到以 data- 开头的数据，则只取 data- 后面的部分放入输入框

或者是另一种需求：

当用户在复制页面上的文字时，自动给它复制的内容后面加上版权信息

再或者就是简单的点击复制

这上面的功能实现都需要用到浏览器提供给 JavaScript 的剪贴板访问 API，下面我就简单介绍一下这些需求的实现方法

0x01 自动截取粘入的数据

目标：复制了以 data- 开头的数据，粘贴进输入框能自动去掉 data- 这个前缀

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const inputDom = document.getElementById('textInput')

inputDom.onpaste = (e) => {
  // 得到当前剪贴板中已经复制的数据
  const copiedData = e.clipboardData.getData('text/plain')
  // 检测粘贴的文字是否符合格式，符合则处理再返回
  if(/^data-/.test(copiedData)){
      // 在这里通过代码的方式把数据加入到输入框
      // ...

      // 取消浏览器默认的粘贴操作
      e.preventDefault()
  }
}

其实就很简单，我们通过粘贴前判断该数据是不是符合我们要求的，如果符合，就取消浏览器的默认操作，然后使用代码手动将数据加入到输入框。

0x02 复制时自动加入版权信息

这个也很简单，监听复制事件，然后将剪贴板的数据取出来，拼接上我们的版权信息再粘回去即可：

1
2
3
4
5
6
7
8
9
10
11
document.body.oncopy = (e) => {
  e.preventDefault()
  // 获取当前选中的文字
  let selectedText = window.getSelection().toString()

  // 将该文字做处理，或是加版权都可以
  // ...

  // 设置到剪贴板上去
  e.clipboardData.setData('text/plain', selectedText)
}

0x03 点击复制

至于点击复制实现就更加有趣了，我们无法直接访问剪贴板的，所以我们需要先创建一个隐藏的 input 标签，然后在里面放上我们要复制的内容，再用 JavaScript 实现复制：

1
<input type="text" value="text to copy" id="ipt" style="opacity:0;">
1
2
3
4
5
const inputDom = document.getElementById("ipt")
// 让输入框中的文本处于全选中状态
inputDom.select()
// 调用浏览器接口，复制选中的内容到剪贴板
document.execCommand("copy");

注意⚠️：上面有个容易出错的地方，就是容易把 input 标签设置为 display:none，这样是不生效的，浏览器无法选中没有渲染出来的文本的，所以我们可以通过设置透明度或者宽高等，让 input 隐藏起来。

好了，太久没写博客了，加油！