关于复制功能我有话要说

简介：js复制文本，vue复制文本内容

最近闲来无事，研究了一写前端开源框架，发现别人写的复制和我写的有天差地别。于是网上搜索了一下，结果网上的答案和我写的基本一致，都是模拟鼠标点击复制输入框内容。

我自己写的复制功能JS代码：

原理是模拟鼠标点击【input】，执行复制【input】中的内容，这种方式，兼容性极差。在开发APP嵌套网页时就发现APP端可能会禁用此类行为，导致复制失败。个人测试过发现IOS端基本不行，完整代码如下：

//参数为文本内容
function copy_content(text){
    //创建一个输入框
    var transfer = document.createElement('input');
    //将输入框插入到页面的一个div元素中
    document.getElementById('copy').appendChild(transfer);
    //给输入框复制
    transfer.value = text;
   //让输入框获得焦点
    transfer.focus();
    transfer.contentEditable = true;
    //设置输入框为只读状态
    transfer.readOnly = false;
    //模拟点击复制
    if(transfer.setSelectionRange) {
        transfer.setSelectionRange(0,transfer.value.length);
        var range = document.createRange();
        range.selectNodeContents(transfer);
    }else{
        transfer.select();
    }
    document.execCommand('copy',false,null);
    //让输入框失去焦点
    transfer.blur();
   //删除输入框元素
    document.getElementById('copy').removeChild(transfer);
    console.log('复制成功')
}

开源框架中的COPY功能

开源项目中的复制功能比较简单，利用了【clipboard.js】这个第三发插件。

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中

clipboard.js支持主流的浏览器：chrome 42+、Firefox 41+、IE 9+、opera 29+、Safari 10+

import Clipboard from 'clipboard'
//参数一：文本内容
//参数二：页面某个元素的点击事件
export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    console.log('复制成功');
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    console.log('复制失败');
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

在vue中导入该函数并使用

<template>
    <div>
         <div @click="handleClipboard(form.app_key, $event)">复制</div>
    </div>
</template>

<script>
import clipboard from '@/utils/clipboard'
export default {
    name: 'test',
    methods: {
        handleClipboard(text, event) {
            clipboard(text, event)
        }
    }
}
</script>

这个插件最大的好处就是兼容性比较好。

 

有遗漏或者不对的可以在我的公众号留言哦