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 ...
随机推荐
- AJAX 实现form表单提交
1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...
- python调用C++实例:用C++对numpy执行BFS(广度优先搜索)
下文的代码可能展示不全,详情请下载文件:用cpp遍历ndarray.rar 问题背景: 现在我有一张二值图test.npy,需要对其闭区域进行孔洞填充,如下图所示: 文件下载链接:用cpp遍历ndar ...
- 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 ...
- NopCommerce 4.2的安装与运行
一.关于NopCommerce NopCommerce是国外ASP.Net领域一个高质量的B2C开源电商项目,最新版本4.2基于ASP.NET Core MVC 2.2和EF Core 2.2开发,其 ...
- java 接口中的成员变量与方法
java接口中变量的默认修饰符为 public static final int i = 3; 相当于 public static final int i = 3; java接口中方法的默认修饰符为 ...
- 来认识一下venus-init——一个让你仅需一个命令开始Java开发的命令行工具
源代码地址: Github仓库地址 个人网站:个人网站地址 前言 不知道你是否有过这样的经历.不管你是什么岗位,前端也好,后端也罢,想去了解一下Java开发到底是什么样的,它是不是真的跟传说中的一样. ...
- 数据库之MySQL与Python交互
准备数据 创建数据表 -- 创建 "京东" 数据库 create database jing_dong charset=utf8; -- 使用 "京东" 数据库 ...
- 解决java导入project出现红叉
1.右击,import,选择需要导入的文件组. D:\softwar\seeyon\A8\ApacheJetspeed\webapps\seeyon\WEB-INF\lib 全选,打开,finish ...
- python3 对list对象的增删改查
class peoples: people_list =[] class people: name='' age=-1 def __init__(self,name,age): self.name = ...
- 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 ...