原生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 ...
随机推荐
- VS2019打包WPF安装程序最新教程
VS2019打包WPF安装程序最新教程,使用Visual Studio 2019开发的WPF程序如果想要打包为安装程序,除了在VS2019找到WPF项目类库直接右键发布之外,更常用的还是将其打包为ex ...
- PHP-PSR 现代PHPer的开发规范
PSR是PHP Standards Recommendation的简称,意为PHP推荐标准.要想了解PSR,首先得知道制定这一标准的人/组织是谁————PHP-FIG. PHP-FIG PHP-FIG ...
- thinkphp 5.1 去掉 .html 后缀
thinkphp 5.1 去掉 .html 后缀
- suseoj 1209: 独立任务最优调度问题(动态规划)
1209: 独立任务最优调度问题 时间限制: 1 Sec 内存限制: 128 MB提交: 3 解决: 2[提交][状态][讨论版][命题人:liyuansong] 题目描述 用2台处理机A和B处理 ...
- 关于 “'sqlite3' 不是内部或外部命令.....”问题
学习django 按书上的 执行 manage.py dbshell 时, 报“'sqlite3' 不是内部或外部命令,也不是可运行的程序 或批处理文件.” 也就是指,环境变量中没有“sqlite3 ...
- 使用ASP.NET Core 3.x 构建 RESTful API - 3.2 路由和HTTP方法
ASP.NET Core 3.x 的路由 路由机制会把一个请求的URI映射到一个Controller上面的Action,所以当你发送一个HTTP请求的时候,MVC框架会解析这个请求的URI,并尝试着把 ...
- 在input输入值改变reducer里的值
输入值改变reducer里的值 通过store.dispatch传入reducer中,函数的第二个参数可以接收到 在reducer中 在todolist文件中 然后在把this.state中的值改变
- 页面加载和图片加载loading
准备放假了!也是闲着了 ,就来整理之前学到或用到的一下知识点和使用内容,这次记录的是关于加载的友好性loading!!!这里记录一下两种加载方法 1.页面加载的方法,它需要用到js里面两个方法 doc ...
- pdf 在线预览之 pdfobject插件
支持到ie9 可以不用安装 如果安装 npm i pdfobject 第一步:引入pdfObject包 申明一个变量 const { PDFObject } = require("../. ...
- 2019-10-31:渗透测试,基础学习,mongodb注入学习
mongodb命令删除文档,db.集合名.remove({键:值})更新文档,db.集合名.update({被更新的对象},{$set:{要更新的内容}}),默认只更新检测到的第一条文档更新全部匹配到 ...