JavaScript 复制粘贴
2018年12月19日 11:09 · Updated at 2021年4月24日 18:58
0x00
在前端开发中,我们可能会遇到类似这种需求:
给定一个输入框,支持用户粘贴输入。在粘贴的时候,如果检测到特定的字符串,需要自动的修改粘贴进去的值,如检测到以
data-
开头的数据,则只取data-
后面的部分放入输入框
或者是另一种需求:
当用户在复制页面上的文字时,自动给它复制的内容后面加上版权信息
再或者就是简单的点击复制
这上面的功能实现都需要用到浏览器提供给 JavaScript 的剪贴板访问 API,下面我就简单介绍一下这些需求的实现方法
0x01 自动截取粘入的数据
目标:复制了以 data-
开头的数据,粘贴进输入框能自动去掉 data-
这个前缀
1 | const inputDom = document.getElementById('textInput') |
其实就很简单,我们通过粘贴前判断该数据是不是符合我们要求的,如果符合,就取消浏览器的默认操作,然后使用代码手动将数据加入到输入框。
0x02 复制时自动加入版权信息
这个也很简单,监听复制事件,然后将剪贴板的数据取出来,拼接上我们的版权信息再粘回去即可:
1 | document.body.oncopy = (e) => { |
0x03 点击复制
至于点击复制实现就更加有趣了,我们无法直接访问剪贴板的,所以我们需要先创建一个隐藏的 input
标签,然后在里面放上我们要复制的内容,再用 JavaScript 实现复制:
1 | <input type="text" value="text to copy" id="ipt" style="opacity:0;"> |
1 | const inputDom = document.getElementById("ipt") |
注意⚠️:上面有个容易出错的地方,就是容易把 input 标签设置为 display:none
,这样是不生效的,浏览器无法选中没有渲染出来的文本的,所以我们可以通过设置透明度或者宽高等,让 input 隐藏起来。
好了,太久没写博客了,加油!