Javascript实现复制选中内容到剪贴板 | Web前端

  • 2018-12-01
  • 462
  • 4

最近在一个项目中要实现复制选中内容到剪贴板的功能, 查看了很多资料, 最后总结出了三种方法

  • ZeroClipboard插件 –借助各大浏览器对Flash的支持,通过Javascript与Flash交互,将需要复制的内容传递到Flash中,再调用Flash操作剪切板的命令将内容复制到剪贴板. 十分强大, 兼容性极强.
  • clipboard插件 –clipboard.js 是一个不需要flash,将文本复制到剪贴板的插件.
  • document.execCommand(“Copy”, false, null) –HTML5新方法

对于document.execCommand MDN web docs给出的的解释是

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

随着HTML5的出现, Flash逐渐被淘汰, 这里我直接淘汰了ZeroClipboard…..

作为一个年轻的菜鸡程序员, 我也更喜欢年轻HTML5, 所以我选择了document.execCommand().

当然我对这些做了一点基本的比较

我在BootCDN下载了ZeroClipboard插件和clipboard插件的.min.js文件


可以发现ZeroClipboard.min.js有30.7kb, 而clipboard.min.js也有10.4kb

似乎ZeroClipboard插件还需要ZeroClipboard.swf文件

这两个插件相对起来各有优势, ZeroClipboard兼容性更好, 而clipboard则性能更好

当然还有document.exeCommand(), 性能我就不扯了, 由于是新东西, 所以兼容性是个很大的问题

我去MDN web docs查看了一下他的兼容性

PC端

移动端

可以看到PC端各大浏览器基本都已经兼容好了, 作为一个佛系程序员, ie基本被我淘汰了

而移动端emmm, 我有测试过我自己手机(安卓8.1.0)

  • 手机自带浏览器 支持
  • qq浏览器(独立) 不支持
  • qq内置浏览器 支持
  • 微信内置浏览器 支持
  • Chrome Mobie 支持

emmmmm 看不懂tx

至于移动端浏览器版本问题, emmmm这么佛的我都有经常更新软件. 算了, 不管这个

总得来说, 可以看出各大浏览器对document.execCommand的兼容还是处理的挺好的


不扯淡了, 来代码

首先是MDN WEB API提供的代码

<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="测试文本"/>
<input type="button" id="btn" value="复制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function(){
        var inputText = document.getElementById('inputText');
        var currentFocus = document.activeElement;
        inputText.focus();
        inputText.setSelectionRange(0, inputText.value.length);
        document.execCommand('copy', true);
        currentFocus.focus();
    });
</script>

我用jquery实现的是:

<input type="text" id="copy_text" value="测试内容"/>
<a href="javascript:;" onclick="copyText('#copy_text')">点击复制</a>
<script>
function copyText(selector) {
    $(selector).select();
    // document.execCommand("Copy", false, null)会返回一个boolean
    if (document.execCommand("Copy", false, null)) {
        //复制成功信息
    } else {
        //复制失败信息
    }
}
</script>

通常, 我们为了页面更好的布局, 会将input表单隐藏起来…..坑来了

第一个坑…

我把表单设置为隐藏表单即<input type="hidden" value="测试内容"/>

这里 复制功能完全失效… document.exeCommand(“Copy”) 仍然返回true

第二个坑…

直接display:none隐藏表单即

<input type="text" value="测试内容" style="display:none;" />

复制功能完全失效… document.exeCommand(“Copy”) 仍然返回true (我Ctrl C了这句话)

第三个坑…

给表单设置width:0;即 <input type="text" style="width:0;" />

复制功能完全失效… document.exeCommand(“Copy”) 仍然返回true

emm好吧这里变了一下, 这里可以发现能够成功复制, 但是复制内容为空

总结:
一切隐藏表单或者达到这样的目的, 比如:width:0;hieght:0;border:0;……等等将导致无法达到目的
似乎是如何表单没有占用页面任何空间都会如此.

踩了这么多坑, 终于想到了一个可以说是完美的解决方案, 直接贴代码

<input type="text" id="copy_text" value="测试内容" style="position:absolute;opacity:0;z-index: -999999;"/>
<a href="javascript:;" onclick="copyText('#copy_text')">点击复制</a>
<script>
function copyText(selector) {
    $(selector).select();
    // document.execCommand("Copy", false, null)会返回一个boolean
    if (document.execCommand("Copy", false, null)) {
        //复制成功信息
    } else {
        //复制失败信息
    }
}
</script>

解释一下:
* 绝对定位使表单脱离文档流
* opacity:0使表单完全透明
* z-index:-99999目的是将表单置于页面最底层防止其覆盖在其他元素上, 导致点击效果失效.

完美收工


文章作者: 燕归来
原始链接: https://www.yguilai.com/?p=509
除非特殊说明, 本站所有文章采用 “署名-非商用-相同方式共享 4.0” 协议
转载请注明原文链接及作者


评论

  • 小东回复

    你要完

    • 燕归来回复

      啥情况?