Js实现粘贴板中写入text

3,001 阅读2分钟

「这是我参与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

注意事项

www.zhangxinxu.com/wordpress/2…

上面这种方法虽说支持了粘贴板写文本的基本诉求,但同时也存在一些问题

性能隐患

日常开发,我们需要复制的内容一般是一段口令,一个链接,内容信息并不大,使用 execCommand() 方法完全没问题,是无感知的。

但是,如果需要复制的是非常大段的内容,则 execCommand() 方法可能会引起卡顿,因为 execCommand() 方法是一个同步方法,必须等复制操作结束,才能继续执行后面的代码。

无法修改复制内容

这个缺点主要针对的是输入框的部分内容复制到粘贴板,但是因为上面的方法实际上是拷贝我们需要的文本内容,所以就不存在这个问题

浏览器兼容

下面是不同的浏览器的兼容场景,在实际使用时也需要注意

image.png

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或者有更好的建议,欢迎批评指正,不吝感激