• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

web复制按钮功能实现

154 2

三种方式,两种原生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的组件写法,如果不懂组件用法的可以看看我的另一篇关于数字跳动插件的文章,里面有讲用法。

0
  • 本文分类:JavaScript
  • 本文标签:web复制按钮
  • 流行热度:已超过 154 人围观了本文
  • 最后更新:2020年04月4日 - 22时42分18秒
  • 发布日期:2020年04月4日 - 22时41分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码