方法一:

function copyHandle(content){
let copy = (e)=>{
e.preventDefault()
e.clipboardData.setData('text/plain',content)
alert('复制成功')
document.removeEventListener('copy',copy)
}
document.addEventListener('copy',copy)
document.execCommand("Copy");
}

过程:
1. document.execCommand("Copy")  触发复制监听事件
2. e.clipboardData.setData 将内容添加到剪切板
3. 复制完成后,取消监听事件,否则会触发多次
应用场景:
已知复制的内容,传入内容直接调用函数

方法二:

function copyLink(dom) {
let range = document.createRange();
let selection = window.getSelection();
range.selectNode(dom);
selection.removeAllRanges();
selection.addRange(range);
let bool = document.execCommand("copy", "false", null);
if (bool) {
alert("复制成功");
}
document.execCommand("unselect", "false", null);
}

过程:

1. range.selectNode 创建选取内容范围

2. removeAllRanges 清除已选择的内容

3. addRanges 添加选取内容,模拟用户选取

4. document.execCommand("Copy") 触发复制事件

5. document.execCommand("unselect", "false", null) 取消选取区域

应用场景:

复制指定节点的内容

原生js 复制内容到剪切板的更多相关文章

  1. js复制内容到剪切板

    注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点  这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...

  2. js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

      最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...

  3. 在多浏览器使用JS复制内容到剪切板,无需插件

    最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...

  4. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  5. js 复制内容到剪切板

    function oCopy(objname){//只兼容IE var obj = $(objname); obj.select(); js=obj.createTextRange(); js.exe ...

  6. JS禁止右键查看源码,禁止复制,复制内容到剪切板

    有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...

  7. javascript复制内容到剪切板/网页上的复制按钮的实现

    javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...

  8. js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

    Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...

  9. 兼容安卓和ios实现一键复制内容到剪切板

    实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

随机推荐

  1. Typescript I: 遍历Array的方法:for, forEach, every等

    Typescript的官方文档 Iterators and Geneators (https://www.typescriptlang.org/docs/handbook/iterators-and- ...

  2. 学习Java第一步:安装Intellij IDEA和JDK

    注:其实真正学习一门新语言的第一步并不是安装开发工具,我是C#转JAVA,有一点编程经验了,所以可以直接跳过前面几步,直接上IDE. 1.下载IntelliJ IDEA [官网] http://www ...

  3. 公众号第三方平台开发 component_verify_ticket和accessToken的获取

    公众号第三方平台审核通过之后,微信的服务器会定时(10分钟一次)给"授权事件接收URL"发送component_verify_ticket,这里我们需要及时更新component_ ...

  4. linux目录数

    FHS Filesystem Hierarchy Standard(文件系统层次化标准,[ˈhaɪərɑ:rki] 等级制度)的缩写,多数Linux版本采用这种文件组织形式,类似于Windows操作系 ...

  5. objc里的伪指针TaggedPointer

    如果你看过我前面两篇objc函数枢纽msgSend和你印象中的NSString是这样吗,相信已经多次看过它的身影了,到底它是何物何作用,我今日就来揭开谜团.我之所为称呼它为伪指针,是因为它像幽灵一样, ...

  6. Long, long ago

    Tell me the tales that to me were so dear; 请你给我讲那亲切的故事; Long, long ago; long, long ago.; 多年以前,多年以前; ...

  7. Code Runner for VS Code 突破 1000 万下载量!支持运行超过 40 种语言

    记得三年多前,韩老师那时还在写 PHP(是的,没错!在微软写 PHP),同时需要写 Python 和 Node.js .所以在那时,支持多种语言的 VS Code 已经是笔者的主力编辑器了.唯一不足的 ...

  8. Win 使用终端创建mysql数据库及使用(5)

    删除你创建过的数据库newsql里面的所有表 这里必须安装了mysql,并且知道用户名密码IP地址.因为我用的window,所以只介绍Win使用cmd创建的方式 首先windown+R 出现窗口输入c ...

  9. 线程池ThreadPoolExecutor的使用方法

    方法我们通过继承Thread类和实现runnable接口或者callable接口三种方式实现. 继承Thread类实际上也是实现了runnable接口,被继承的类主要是实现run()方法,通过star ...

  10. C#音频截取与原文匹配2:使用ffmpeg处理音频文件

    ffmpeg获取音频时间 ffmpeg转换音频格式(单声道,16000hz,16bit  wav) ffmpeg截取音频 不知道是不是错觉,感觉ffmpeg比NAudio要快啊~ 那么这就是第二个版本 ...