H5/纯JS实现:把网页中的文字复制到剪切板
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实现:把网页中的文字复制到剪切板的更多相关文章
- js 最简单的实现复制到剪切板 xl_copy
使用 npm install xl_copy // 项目中安装 import clipboard form 'xl_copy' // 引用 element.onclick = ()=>{ ...
- 复制到剪切板js代码(转)
<script type="text/javascript" language="javascript"> //复制到剪切板js代码 functio ...
- clipboard.js 实现动态获取内容并复制到剪切板
使用clipboard.js分为以下几个步骤: 1.引入一个clipboard.js的文件: 2.新建一个clipboard对象: 3.点击按钮获取目标对象里面的内容,将其复制到剪切板. 注意:1.目 ...
- web复制到剪切板js
web复制到剪切板 clipboard.js 好使!开源项目,下载地址: https://github.com/zenorocha/clipboard.js 使用方法: 引入 clipboard.mi ...
- 在纯HTML的静态网页中添加一段统计网页访问量的JAVA Script代码?
如何在网站上进行流量统计呢,可以找第三方服务网站去注册,但也可以在网站上直接添加代码,只需将以下代码copy到你的网页中,复制到</body>之前就可以啦!是不是很简单啊! <scr ...
- javaScript 实现倒计时 + 获取网页中的文字
一.倒计时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- clipboard.js 实现web端---> 复制到剪切板功能
package.json 中: 添加clipboard 依赖 "dependencies": { "vue": "^2.2.2", &quo ...
- js 将内容复制到剪切板上
clipboard是将内容复制到电脑的剪切板上,要引入clipboard.js //将'data-clipboard-text' 样式添加到指定的元素上 $("#effects") ...
- js中实现 复制到剪切板 功能
一:引包 <script type="text/javascript" src="jquery.js"></script> <sc ...
随机推荐
- 算法问题实战策略 FENCE
地址 https://algospot.com/judge/problem/read/FENCE 开始考虑暴力遍历 #include <iostream> #include <str ...
- 【转】bootstrap table轻松实现数据表格
在使用bootstrap table时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstrap table 封装了一套完善的数据表格组件,把从后台 ...
- 通过windows组策略配置时间同步
Windows系统中带有NTP服务器和客户端的程序,只需在Windows中简单配置即可实现电脑之间的时间同步. 网上常见的配置NTP服务器的方法是修改系统注册表,这种方法是微软不推荐的.在实际使用中, ...
- es6一句话拾遗
Symbol最大的作用就是用于消除魔术字符串: Set跟数组的最大区别,就是Set的成员都是唯一的,没有重复:(方法:add(value),has,delete,clear) Map跟对象的最大区别, ...
- ImportError: unable to find Qt5Core.dll on PATH
一.实验环境 1.Windows7x32_SP1 2.python3.7.4 3.pyinstaller3.5 二.问题描述 1.一直都是在Windows10x64上使用pyinstaller打包ex ...
- 完美解决linux下vim在终端不能用鼠标复制的问题
在vim 中输入 :set mouse=r 就行了,还不行的话 :set mouse=v
- media适配css
/*引入适配的less*/ html { font-size: 16px; } @media only screen and (min-width: 320px) { html { font-size ...
- Dynamics CRM中的操作(action)是否是一个事务(transaction)?
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复168或者20151104可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 以前的博文 微软Dynamics ...
- linux cpu信息
/* who参数 RUSAGE_SELF:只返回当前程序的CPU时间占用信息 RUSAGE_CHILDREN:还包括子进程的CPU时间占用信息 */ int getrusage(int who, st ...
- 由定时脚本错误以及Elasticsearch配置错误引发的Flink线上事故
近期接手离职同事项目,突然遇到线上事故,Flink无法正常聚合数据生成指标. 以下是详细的排查过程: 问题复现 清晨,运维报告Flink数据分析模块无法正常生成指标数据. 赶紧登陆Flink所在机器, ...