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); // 将复制信息添加到剪切板
             }

    }

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



  • 相关阅读:
    一般工程文件和DLL工程文件区别
    [转载 js]javascript的陷井
    函数两种定义方法的区别
    D2视频补完,哈哈,有我的镜头
    YUI中js的继承示例
    状态模式
    YUI2.x和YUI3的差别
    函数两种定义方法的区别
    YUI中js的继承示例
    D2视频补完,哈哈,有我的镜头
  • 原文地址:https://www.cnblogs.com/zhubei/p/9178545.html
Copyright © 2011-2022 走看看