H5前端js中自动复制功能:简单说下就是点击一个按钮触发事件,然后PC页面或者手机上的快捷粘贴都会被绑定复制值

万变不离其中,我还是喜欢用原生的方法document.execCommand('copy')。网上也有些第三方js封装了这个方法属性,但是浏览器会有兼容问题

 

先从html开始吧,如下:

        <label id="cSharingLinks" style="opacity:0;position: absolute;z-index:-999" >123</label>
        <input type="button" value="复制" class="btnCopySharingLinks" />

第一个label标签用来存需要绑定复制的值。

注意:我之前用的input 的文本框,然后复制后粘贴出来会有2个换行,我是琢磨了半天去不掉,然后换label就收工了。

      这个标签不能用这些方法隐藏( jquery.hide()、display:none ) ,不然Copy失败。但是加了些样式给他变透明、漂移、置底 差不多也是个隐藏就行了。

第二个input按钮主要用来触发事件,随便你用啥,只要你能触发事件就行(我用标签的class通过juqery绑定了click方法)。

 

再是js代码,如下:

        $("#cSharingLinks").html("需要复制的值");  //为标签写入需要复制的值。注意:在Vue.Js中这步需要放在Created或者methods中,不然赋值顺序会有问题。
        $(".btnCopySharingLinks").click(function () {

          var copyDom= document.getElementById('cSharingLinks');  //原生js根据Id获取到Dom对象。
          var range = document.createRange();  //创建一个range对象。
          range.selectNode(copyDom);  //选择整个节点,包括子节点。
          window.getSelection().removeAllRanges();  //移除选中内容。
          window.getSelection().addRange(range);  //添加选中内容。
           document.execCommand('copy');  //执行自动复制。
          window.getSelection().removeAllRanges();  //删除所有选中内容。
        });

最后,如果是一次性的可以通过 以下2个方法,解除对范围的引用,从而让垃圾回收机制回收其内存。但是一旦分离了就没法再使用了。

        range.detach(); /从文档中分离
        range = null; //解除引用

以上都是个人陋闻,如有问题有劳指正,大家共同学习共同进步。如果有帮助到您,希望您能给动个小手点一下右下方的推荐,谢谢。

 

posted on 2019-06-18 18:19  骑蜗牛的摩托车  阅读(1054)  评论(0编辑  收藏  举报