「这是我参与11月更文挑战的第10天,活动详情查看:2021最后一次更文挑战」。
很久不写前端代码了,最近整一个chrome插件时,希望将数据保存到粘贴版,试了好几种方式,结果发现都不太好使,直接基于输入框来实现赋值粘贴可行,若直接往粘贴板中写数据却没试出来;作为一个前端菜鸟就只能猥琐一点的实现了
下面是一个JS实现向粘贴板中写文本的方式
/**
* 写入粘贴板
*/
function toCopy(text) {
// 将传进来的参数强转为字符串
text = String(text);
input = document.createElement('INPUT');
input.style.opacity = 0;
input.style.position = 'absolute';
input.style.left = '-9999px';
document.body.appendChild(input);
input.value = text;
input.select();
input.setSelectionRange(0, text.length);
document.execCommand('copy');
document.body.removeChild(input);
}
从上面的实现可以了解其基本思路:
- 创建一个不可见的input
- 然后将text复制到这个input
- 然后利用
document.execCommand
来实现拷贝功能 - 最后移除这个input
注意事项
上面这种方法虽说支持了粘贴板写文本的基本诉求,但同时也存在一些问题
性能隐患
日常开发,我们需要复制的内容一般是一段口令,一个链接,内容信息并不大,使用 execCommand()
方法完全没问题,是无感知的。
但是,如果需要复制的是非常大段的内容,则 execCommand()
方法可能会引起卡顿,因为 execCommand()
方法是一个同步方法,必须等复制操作结束,才能继续执行后面的代码。
无法修改复制内容
这个缺点主要针对的是输入框的部分内容复制到粘贴板,但是因为上面的方法实际上是拷贝我们需要的文本内容,所以就不存在这个问题
浏览器兼容
下面是不同的浏览器的兼容场景,在实际使用时也需要注意
2.Clipboard API
接下来是另外的一种方式,非常简单的一行就可以实现基本诉求
if (navigator.clipboard) {
navigator.clipboard.writeText(text);
}
需要注意的是,上面这个case,直接调用的时候,会提示Document is not focused.
,详情可以参考
stackoverflow.com/questions/5…
3. 整合
接下来将上面两个代码封装一下,实现一个文字复制到找剪切板
function toCopy(text) {
if (navigator.clipboard) {
navigator.clipboard.writeText(text);
return;
}
// 将传进来的参数强转为字符串
text = String(text);
input = document.createElement('INPUT');
input.style.opacity = 0;
input.style.position = 'absolute';
input.style.left = '-9999px';
document.body.appendChild(input);
input.value = text;
input.select();
input.setSelectionRange(0, text.length);
document.execCommand('copy');
document.body.removeChild(input);
}
一灰灰的联系方式
尽信书则不如无书,以上内容,纯属一家之言,因个人能力有限,难免有疏漏和错误之处,如发现bug或者有更好的建议,欢迎批评指正,不吝感激
- 个人站点:blog.hhui.top
- 微博地址: 小灰灰Blog
- QQ: 一灰灰/3302797840
- 微信公众号:一灰灰blog