javascript 复制到剪贴板

前言:

       想实现一个点击复制事件,但是以前没有进行过相关操作.找了一些资料,多数是过时 或者 写的看不懂的.于是自己搞懂了之后在此分享自己的成果.

  直接上代码,注释比较详细,就不多说了:  

//此方法需要参数,类型是 DOM元素
      function copyText(ele) {
        /*相关 函数介绍:
          window.getSelection() 返回一个 Selection 对象
          表示用户选择的文本范围或光标的当前位置。
          removeAllRanges() 会从当前selection对象中移除所有的range对象
          取消所有的选择只 留下anchorNode 和focusNode属性并将其设置为null
        */
        //先看下面的 if else 代码
        function otherEle(element) {
          if (document.selection) {//如果已经选中内容
            var range = document.body.createTextRange();
            range.moveToElementText(element);
            range.select();
          } else {//没有选中内容
            window.getSelection().removeAllRanges();
            var range = document.createRange();//创建range对象
            range.selectNode(element);//选中传入 dom 元素
            window.getSelection().addRange(range);//一个区域（Range）对象将被增加到选区（Selection）当中
          }
        }
        //这里才是主体
        if (ele.select) {
          //方法作用,选取文本域的内容
          ele.select();
        } else {
          //选取传入的dom内容
          otherEle(ele);
        }
        //执行 复制
        document.execCommand("Copy");
        window.getSelection().removeAllRanges();
      }

精简功能,复制传入元素的内容:

//完整代码/注释上面已有
function copyContent(ele){//传入 dom元素,复制该元素的内容
      window.getSelection().removeAllRanges();
      var r = document.createRange(); 
      r.selectNode(ele); 
      window.getSelection().addRange(r); 
      document.execCommand("Copy");
      window.getSelection().removeAllRanges();
    }

 

 参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Selection

 参考: https://www.cnblogs.com/running-honor/p/5748737.html

另外推荐一个复制的工具 clipboard.js