2019.10.20-Week-copy拷贝功能

2019.10.20-Week-copy拷贝功能

技术杂谈小彩虹2021-07-12 10:04:4170A+A-

1.复制功能

经常遇到拷贝复制功能的开发,在项目中总结了现有拷贝功能的常见实现方法,并对其优缺点进行比较分析,便于今后开发中拷贝功能的快速实现。

2.实现方法及原理

现在常见的方法主要是以下两种:

  1. 第三方库:clipboard.js
  2. 原生方法:document.execCommand()

1.document.execCommand

MDN 上定义:

当一个HTML文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 方法返回一个 Boolean 值,表示操作是否成功。

aCommandName :表示命令名称,比如:

  • copy拷贝当前选中内容到剪贴板
  • cut拷贝当前选中内容到剪贴板等
  • aShowDefaultUI:是否展示用户界面,一般情况下都是 false
  • aValueArgument:有些命令需要额外的参数,一般用不到

兼容性:

这个方法在之前的兼容性其实是不太好的,但是好在现在已经基本兼容所有主流浏览器了,在移动端也可以使用。 意思就是可以允许运行命令来操作可编辑区域的内容,注意,是可编辑区域。

  • 功能实现--从输入框复制

页面上有一个input标签,复制其中的内容:

<!--   HTML -->
<input id="demoInput" value="hello world">
<button id="btn">点击复制</button>
<!--   JavaScript -->
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
    const input = document.querySelector('#demoInput');
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
    }
})
  • 功能实现--其它地方复制

页面上并没有input标签,可能需要从一个div中复制内容,或者直接复制变量。 在 execCommand() 方法的定义中提到,它只能操作可编辑区域,也就是意味着除了input、textarea这样的输入域以外,是无法使用这个方法的。

<!--   HTML -->
<button id="btn">点击复制</button>
<!--   JavaScript -->
const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
    const input = document.createElement('input');
    document.body.appendChild(input);
    input.setAttribute('value', '复制内容');
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
    }
 document.body.removeChild(input);
})
  1. clipboard.js

工程中复制功能就是借助于clipboard.js插件实现的,使用方法如下:

<!--   HTML -->
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target='#copyValue' id="bar">复制1</button>

<!--   JavaScript -->
const clipboard = new Clipboard('button');
clipboard.on('success',function(e){
    e.clearSelection(); //清除输入框
    $('#bar').focus();
    $('#bar').select();
    $('#bar').text('已复制');
    return false;
});
clipboard.on('error',function(e){
    e.clearSelection();
    alert('复制失败');
});

注意到,在 <button>标签中添加了一个data-clipboard-target 属性,它的值是需要复制的 <input>id,即从整个标签中复制内容。

有的时候我们需要在复制后做一些事情,这时候就需要回调函数的支持,复制成功、失败后执行的回调函数通过on方法监听成功、失败事件,进行相应处理。

3.优缺点比较

  1. Clipboard.js 近几年使用较多,体积相对小,兼容性可以接受,使用还比较方便。 execCommand 新兴势力,safari等主流浏览器正在努力兼容
  2. Clipboard.js 较小,4KB; execCommanddocument方法,不用插件

4.总结

其实Clipboard插件本质上也是封装了selectionexecCommand方法实现的拷贝功能。

在项目开发中,大量copy功能的实现使用插件较为方便,比如工程已经提供Clipboard.js插件的引用;在一些别的活动页面开发时,为了一两个页面中的拷贝功能实现也不需要插件的引用,直接使用document.execCommand方法。

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们