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 隐藏起来。

好了,太久没写博客了,加油!