zoukankan      html  css  js  c++  java
  • 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); // 将复制信息添加到剪切板
             }

    }

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



  • 相关阅读:
    正则
    springboot整合rabbitmq(fanout广播模式)
    docker 安装rabbitmq
    centos7安装rabbitmq
    rabbitmq报错{:query, :rabbit@master1, {:badrpc, :timeout}}
    Linux永久修改hostname
    thread dump日志文件分析
    模板方法模式
    装饰器模式
    springboot集成redis,压测报错;
  • 原文地址:https://www.cnblogs.com/zhubei/p/9178545.html
Copyright © 2011-2022 走看看