前端JS控制网页复制粘贴

简介: 前端JS控制网页复制粘贴
<script>
        (function() {
  document.addEventListener('copy',(e)=>{
    e.preventDefault();
    e.stopPropagation();
    console.info('触发复制事件');
    /** 
      返回一个Selection对象,表示用户选择的文本范围或光标的当前位置
      Selection.getRangeAt返回一个包含当前选区内容的区域对象
    */
    let text = window.getSelection().getRangeAt(0);
    let node = document.createElement('div');
    // cloneContents方法把范围(Range)的内容复制到一个DocumentFragment对象
    node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
    /** 
       ClipboardEvent.clipboardData 属性保存了一个 DataTransfer 对象,这个对象可用于:
       描述哪些数据可以由 cut 和 copy 事件处理器放入剪切板,通常通过调用 setData(format, data) 方法;
       获取由 paste 事件处理器拷贝进剪切板的数据,通常通过调用 getData(format) 方法
    */
    e.clipboardData.setData("text", text+"\n'''\nhttps://www.***.com/3-wusen/\n欢迎访问我的博客\n'''");
    // console.log(node.innerHTML)
    // console.log(text)
    // if(e.clipboardData){
    //   e.clipboardData.setData("text/html", node.innerHTML);
    //   e.clipboardData.setData("text/plain",text);
    // }else if(window.clipboardData){
    //   return window.clipboardData.setData("text", text);
    // }
  })
}());
    </script>
目录
打赏
0
0
0
0
100
分享
相关文章
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
152 56
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
845 93
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
126 8
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等