原生js 复制内容到剪切板
方法一:
function copyHandle(content){
let copy = (e)=>{
e.preventDefault()
e.clipboardData.setData('text/plain',content)
alert('复制成功')
document.removeEventListener('copy',copy)
}
document.addEventListener('copy',copy)
document.execCommand("Copy");
}
方法二:
function copyLink(dom) {
let range = document.createRange();
let selection = window.getSelection();
range.selectNode(dom);
selection.removeAllRanges();
selection.addRange(range);
let bool = document.execCommand("copy", "false", null);
if (bool) {
alert("复制成功");
}
document.execCommand("unselect", "false", null);
}
过程:
1. range.selectNode 创建选取内容范围
2. removeAllRanges 清除已选择的内容
3. addRanges 添加选取内容,模拟用户选取
4. document.execCommand("Copy") 触发复制事件
5. document.execCommand("unselect", "false", null) 取消选取区域
应用场景:
复制指定节点的内容
原生js 复制内容到剪切板的更多相关文章
- js复制内容到剪切板
注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点 这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...
- js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...
- 在多浏览器使用JS复制内容到剪切板,无需插件
最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...
- 简单实现兼容各大浏览器的js复制内容到剪切板
因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...
- js 复制内容到剪切板
function oCopy(objname){//只兼容IE var obj = $(objname); obj.select(); js=obj.createTextRange(); js.exe ...
- JS禁止右键查看源码,禁止复制,复制内容到剪切板
有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...
- javascript复制内容到剪切板/网页上的复制按钮的实现
javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...
- js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...
- 兼容安卓和ios实现一键复制内容到剪切板
实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
随机推荐
- 关于MXNet
关于人工智能,机器学习,深度学习 三者关系:从宏观到微观. 机器学习是人工智能的一部分,深度学习是机器学习的一部分. 基础:大数据. 关于深度学习 深度学习基于神经网络, 关于神经网络:通过叠加网络层 ...
- MySql——创建数据表,查询数据,排序查询数据
参考资料:<Mysql必知必会> 创建数据表 在学习前首先创建数据表和插入数据.如何安装mysql可以看看上个博客https://www.cnblogs.com/lbhym/p/11675 ...
- 如何解决UNMOUNTABLE BOOT VALUME
Windows error:UNMOUNTABLE BOOT VALUME 解决方法:Windows 修复工具 chkdsk命令 chkdsk D:/f ps:chkdsk 磁盘名 /f
- 《JAVA 程序员面试宝典(第四版)》读书笔记之前言
工作五年了一直在小的软件公司混,总感觉自己的专业知识没有太大的提升.当然了中间也换了一两家公司,面试的公司就很多家,总感觉正规的软件公司(无论大小)对于基础知识的考核都非常重视,而不管你说你之前服务过 ...
- python:模块0
一.模块是更高级的封装: 容器:数据的封装 函数:语句的封装 类 :方法和属性的封装 模块:模块就是程序,即每个.py文件 二.引入 import 模块名 from 模块名 import xx(函 ...
- 磁盘配额管理disk quotas
条件: a.确保系统内核支持,Linux一般都支持 b.确保分区格式支持,ext2都只持! c.安装有quota软件,centos默认都有! (1)检查内核是否打开磁盘配额支持 [root@cento ...
- Andorid开发中遇到的问题
最近开始学习开发Android App,找了本教程,学了一些基本知识后,就开始着手做一个例子. 我始终觉得在做中学,可能会稍微快一点.很快,一个具有初步功能的App被我撸出来了. 在模拟器上运行,我发 ...
- 结合源码,重温 Android View 的事件处理知多少 ?
前言 Android View 的 事件处理在我们的编程中,可谓是无处不在了.但对于大多数人而言,一直都是简单的使用,对其原理缺乏深入地认识. 学 Android 有一段时间了,最近发现,很多基础知识 ...
- go modules 学习
go modules 学习 tags:golang 安装 只需要golang的版本是1.11及之后的,这个模块就内置好了 环境变量 (1) 配置GoLang的GOROOT (2) 可以不配置GoLan ...
- 【Luogu P1981】表达式求值
点我进入原题Luogu P1981 [解题思路] 仔细分析题目,这就是一道模拟题…… 直接按照符号读入全部的数字,先算乘法,最后把全部数加起来就是结果了 记得要%10000取最后四位 [参考程序] # ...