更新于

web复制按钮功能实现

发布于 / 分类: JavaScript / 暂无评论 / 阅读量: 179

三种方式,两种原生js方式,一种js插件。

html代码

<div class="container my-5">
    <p id="box">这是福实打实大师空dsadada间大空间的哈实践活动卡萨很大快速</p>
    <button class="btn btn-info mb-3" id="copy">复制</button>
    <input type="text" class="form-control">
</div>

原生js方式1

$('#copy').on('click', function() {
            window.getSelection().selectAllChildren($('#box')[0]);
            document.execCommand("Copy");
            window.getSelection().removeAllRanges();
            alert("复制成功")
        }

注意一点就是,该方法必须为用户触发,因为规定是这样的,防止恶意代码操作剪贴板。

该方法原理就是将一个input元素内的value值全部复制,所以讲input原生dom对象传入window.getSelection().selectAllChildren()方法中,然后调用document.execCommand("Copy");将内容全部copy,注意,这时会触发copy事件。

然后再清除掉选中,取消元素高亮。

复制成功。

这种方法简单快捷,用于一般的要求中是可以的,假如我们要使用更高的要求,比如传入固定的文本,或者copy元素某一个属性的值,或者我们要截取某一段呢。

原生js方式2

$('#copy').on('click', function () {
    const $box = $('#box');
    const text = $box.data('text');
    const input = $('<input>').attr("value", text).prop("readonly", true);
    document.body.appendChild(input[0]);
    input[0].focus();
    input[0].setSelectionRange(0, 9999)
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    input.remove();
    alert("复制成功");
  })

我们将元素的属性内容获取到,并利用一个表单元素将内容设置为其的value,然后插入body中,并且这个input我们要考虑到手机端如果用select()方法选中的话,会调出手机的虚拟键盘。

而使用document.execCommand('copy');方法的前提是选中文本,所以方法1还要改为如下形式:

$('#copy').on('click', function() {
            $('#box').select();   
            document.execCommand("Copy");
            window.getSelection().removeAllRanges();
            alert("复制成功")
        }

为了防止虚拟键盘弹出,我们给input设置只读readonly,然后出发focus获取焦点,此时才能使用setSelectionRange(0, 9999)方法来高亮选取字段,第一个开始是开始位置,第二个是结束位置,并且是从0开始的,这样我们可以自由选取截取的文本。

高亮选中后,进行copy,copy完毕清除高亮,将inpt删除。

为什么要插入body,我个人测试的时候发现,copy它只能copy可视的内容,也就是你元素显示在html中的,连display:none这些都不行的,必须显示,所以我们要插入body中,并在拷贝完毕后销毁。

以上就是原生的复制功能。

js插件:clipboard.js

github官方地址

说明文档

由于使用简单,而且比自写的功能更完善,大神之作,我等菜鸡仰望啊,但是我又不想搞太多js插件,所以又自己研究了一下原生js的用法,反正小要求用原生更好一下,可控,代码量少,成熟项目,插件更好一些。

怎么用以后我用到了再说吧,官方文档我看了下,是es6的组件写法,如果不懂组件用法的可以看看我的另一篇关于数字跳动插件的文章,里面有讲用法。

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有393条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局

购买