copy =() => {
const dom = document.getElementById(`collect-text-${t.Id}`)
const selection = window.getSelection()
const range = document.createRange() if (!dom || !selection || !range) return // 选择复制目标
range.selectNodeContents(dom)
selection.removeAllRanges()
selection.addRange(range) // 已复制文字
console.log('selectedText', selection.toString()) // 执行复制
document.execCommand('copy') // 去除所有选中
selection.removeAllRanges()
// 复制内容成功,通过ctrl+v粘贴使用!
}

参考资料:

select :  https://github.com/zenorocha/select

clipboard.js :  https://github.com/zenorocha/clipboard.js

H5/纯JS实现:把网页中的文字复制到剪切板的更多相关文章

  1. js 最简单的实现复制到剪切板 xl_copy

    使用 npm install xl_copy // 项目中安装 import clipboard form 'xl_copy' // 引用 element.onclick = ()=>{     ...

  2. 复制到剪切板js代码(转)

    <script type="text/javascript" language="javascript"> //复制到剪切板js代码 functio ...

  3. clipboard.js 实现动态获取内容并复制到剪切板

    使用clipboard.js分为以下几个步骤: 1.引入一个clipboard.js的文件: 2.新建一个clipboard对象: 3.点击按钮获取目标对象里面的内容,将其复制到剪切板. 注意:1.目 ...

  4. web复制到剪切板js

    web复制到剪切板 clipboard.js 好使!开源项目,下载地址: https://github.com/zenorocha/clipboard.js 使用方法: 引入 clipboard.mi ...

  5. 在纯HTML的静态网页中添加一段统计网页访问量的JAVA Script代码?

    如何在网站上进行流量统计呢,可以找第三方服务网站去注册,但也可以在网站上直接添加代码,只需将以下代码copy到你的网页中,复制到</body>之前就可以啦!是不是很简单啊! <scr ...

  6. javaScript 实现倒计时 + 获取网页中的文字

    一.倒计时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  7. clipboard.js 实现web端---> 复制到剪切板功能

    package.json 中: 添加clipboard 依赖 "dependencies": { "vue": "^2.2.2", &quo ...

  8. js 将内容复制到剪切板上

    clipboard是将内容复制到电脑的剪切板上,要引入clipboard.js //将'data-clipboard-text' 样式添加到指定的元素上 $("#effects") ...

  9. js中实现 复制到剪切板 功能

    一:引包 <script type="text/javascript" src="jquery.js"></script> <sc ...

随机推荐

  1. day(66)作业

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. R-长尾词练习

    一. 长尾关键词的特征 长尾关键词通常比较长,往往是2-3个词组成,甚至是短语,存在于内容页面,除了内容页的标题,还存在于内容中. 长尾关键词搜索量虽然非常少,而且不稳定.但是搜索量甚至超越热门目标关 ...

  3. github 码云 chrome文件树形插件

    偶然间看到github有一个树形插件,对于代码层级较多的项目来说体验提升了很多 github的chrome插件 chrome商店: https://chrome.google.com/webstore ...

  4. .NET Core 中读取 Request.Headers 的姿势

    Request.Headers 的类型是 IHeaderDictionary 接口,对应的实现类是 HeaderDictionary ,C# 实现源码见 HeaderDictionary.cs . H ...

  5. 深入理解ES6之解构

    变量赋值的痛 对象 let o = {a:23,b:34}; let a = o.a; let b = o.b; 如上文代码,我们经常会遇到在各种场合需要获取对象中的值的场景,舒服一点的是获取单个属性 ...

  6. yii2自定义验证规则

  7. spring cloud 2.x版本 Gateway路由网关教程

    前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前两篇文章eureka-server.eureka-client.eureka ...

  8. 大话设计模式Python实现-命令模式

    命令模式(Command Pattern):将请求封装成对象,从而使可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤消的操作. 下面是一个命令模式的demo: #!/usr/bi ...

  9. 解决:perl: warning: Please check that your locale settings

    问题: perl: warning: Setting locale failed. perl: warning: Please check that your locale settings: LAN ...

  10. oracle学习笔记(二十一) 程序包

    程序包 之前我们调用的dbms_output.put_line(''),dbms_output就是一个程序包 程序包创建语法 1. 声明程序包 --声明程序包中的过程,函数,自定义的类型 --程序包里 ...