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 ...
随机推荐
- Java Web 学习(7) —— Spring MVC 之国际化
Spring MVC 之国际化 i18n 与 l10n internationalization:国际化,以 i 开头,以 n 结尾,中间 18 个字母,简称 i18n. localization:本 ...
- LG1879 「USACO2006NOV」Corn Fields 状压DP
问题描述 LG1879 题解 设\(opt[i][j]\)代表前\(i\)行,且第\(i\)行状态为\(j\)的方案数. 枚举\(j\),再枚举\(k\),\(k\)为上一行的状态. 判断\(j,k\ ...
- 给用户提供就医帮助的安卓APP
经过我们的小组的成员讨论,我们确定了我们小组的项目,即是一款给用户提供就医帮助的安卓APP. 项目计划及功能:计划两个月内团队成员共同开发完成此款APP,此款APP提供预约挂号,名医名院咨询, 就医导 ...
- CF732D Exams
这题可以用二分答案来做 那么为什么可以用二分答案呢? 答案当然是满足了单调性. 假设用\(x\)天能够考完所有试,那么用大于$x $天必定也能够考完所有试,所以满足了单调性,我们就可以二分答案 那么如 ...
- .NET Core 中的命名问题:Startup 中的 ConfigureServices 与 Configure
一直不喜欢 Startup 中这两个可读性很比较差的糟糕命名 ConfigureServices 与 Configure.ConfigureServices 用于配置依赖注入以在运行时根据依赖关系创建 ...
- js函数只执行一次,函数重写,变量控制与闭包三种做法
一.情景需求 调用后台接口需要附带token信息,那么在每个请求的头部添加token的做法就不太优雅了:一个网站请求100次,那就得写添加100次token,假设某天接口有所变动,改起来就十分麻烦了. ...
- ElementTree类
elementtree主要是一个包含根节点的树的文档包装器 它提供了序列化和一般文档处理的两种方法 from lxml import etree str = '''<?xml version=& ...
- H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...
- 使用csv模块读写csv格式文件
import csv class HandleCsv: ''' csv文件处理类 ''' def __init__(self, filename): ''' 构造器 :param filename: ...
- Elastic:使用Heartbeat进行Uptime监控
Elastic:使用Heartbeat进行Uptime监控 Elastic在6.5的版本中推出Heartbeat.Heartbeat 也就是我们通常所说的心跳.我们知道在医院,医生是用听心跳来判断一个 ...