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. AJAX 实现form表单提交

    1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...

  2. python调用C++实例:用C++对numpy执行BFS(广度优先搜索)

    下文的代码可能展示不全,详情请下载文件:用cpp遍历ndarray.rar 问题背景: 现在我有一张二值图test.npy,需要对其闭区域进行孔洞填充,如下图所示: 文件下载链接:用cpp遍历ndar ...

  3. Codeforces Round #597 (Div. 2) F. Daniel and Spring Cleaning 数位dp

    F. Daniel and Spring Cleaning While doing some spring cleaning, Daniel found an old calculator that ...

  4. NopCommerce 4.2的安装与运行

    一.关于NopCommerce NopCommerce是国外ASP.Net领域一个高质量的B2C开源电商项目,最新版本4.2基于ASP.NET Core MVC 2.2和EF Core 2.2开发,其 ...

  5. java 接口中的成员变量与方法

    java接口中变量的默认修饰符为 public static final int i = 3; 相当于 public static final int i = 3; java接口中方法的默认修饰符为 ...

  6. 来认识一下venus-init——一个让你仅需一个命令开始Java开发的命令行工具

    源代码地址: Github仓库地址 个人网站:个人网站地址 前言 不知道你是否有过这样的经历.不管你是什么岗位,前端也好,后端也罢,想去了解一下Java开发到底是什么样的,它是不是真的跟传说中的一样. ...

  7. 数据库之MySQL与Python交互

    准备数据 创建数据表 -- 创建 "京东" 数据库 create database jing_dong charset=utf8; -- 使用 "京东" 数据库 ...

  8. 解决java导入project出现红叉

    1.右击,import,选择需要导入的文件组. D:\softwar\seeyon\A8\ApacheJetspeed\webapps\seeyon\WEB-INF\lib  全选,打开,finish ...

  9. python3 对list对象的增删改查

    class peoples: people_list =[] class people: name='' age=-1 def __init__(self,name,age): self.name = ...

  10. Define the Data Model and Set the Initial Data 定义数据模型并设置初始数据

    This topic describes how to define the business model and the business logic for WinForms and ASP.NE ...