js实现选择及复制粘贴

最近项目有个点击复制到粘贴板的需求,在这里做一个简单的例子分享给大家,没考虑兼容性,需要兼容的大家去查找下文档

//html
<p id="element">测试测试<p> <botton onclick="copyText(ele)">点击复制</botton>

  

//js
function copyText(ele) {
  var element = document.querySelecter(ele);

   var selection = window.getSelection();   // 创建Selection 对象

     var range = document.createRange(); //创建Range 对象

          range.selectNodeContents(element); //设定一个目标节点内容的 Range 

          selection.removeAllRanges();  //清空选择区域

          selection.addRange(range);  //选中元素, 这一步可以实现全选

          document.execCommand("copy"); //复制到粘贴板

     selection.removeAllRanges(); //选择完成之后清空选择

          element.oncopy = function(e) { //监听 复制事件
                e.preventDefault();
                let copyMsg = window.getSelection() + '商业转载请注明出处。'; // window .getSelection() 表示选择的内容
                e.clipboardData.setData("Text", copyMsg); // 将复制信息添加到剪切板
         }

}

一个简单的选择,复制粘贴就实现啦



 

posted @ 2018-06-13 16:38  毛毛雨_Eric  阅读(2748)  评论(0编辑  收藏  举报