原生js 复制内容到剪切板
时间:2022-07-23
本文章向大家介绍原生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");
}
过程:
1. document.execCommand("Copy") 触发复制监听事件
2. e.clipboardData.setData 将内容添加到剪切板
3. 复制完成后,取消监听事件,否则会触发多次
应用场景:
已知复制的内容,传入内容直接调用函数
方法二:
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) 取消选取区域
应用场景:
复制指定节点的内容
- Python编程语言发展简史
- 学完Python基础知识后,你真的会python吗?
- 一个人的武林:内网渗透测试思路(二)
- Python数据分析之股票实战
- 这货不是电源:硬件渗透测试平台 – Power Pwn
- Python进阶学习之阅读代码
- 代码安全审计:当file_exists遇上eval
- Python 异常处理完整指南
- 有趣的安全实验:利用多线程资源竞争技术上传shell
- NotSerializableException解决方法NotSerializableException
- 谁蹭了我的WiFi?浅谈家用无线路由器攻防
- 当输入流和输出流同时作用一个文件
- 揭秘:充电宝是如何盗取你的个人隐私的?
- 微软:暴力破解面前,增强密码复杂性基本没用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 给Angular应用增添搜索Search功能
- Angular应用一个创建场景的问题分析
- WPF 最简逻辑实现多指顺滑的笔迹书写
- WPF 如何确定应用程序开启了 Pointer 触摸消息的支持
- Hexo-Matery主题美化
- uniapp onPullDownRefresh 下拉刷新小坑
- Windows服务器常用配置
- SAP CRM订单数据库表CRMD_SHIPPING的填充原理
- 使用art-template模板引擎渲染数据
- SAP CRM索引数据库表CRMD_ORDER_INDEX的更新原理
- 将自己的nodeJS项目分享到npm上
- react中使用prop-types检测props数据类型
- git的常用命令及工作中冲突问题解决方法
- 关于react中的context
- 基于Node.js的Express框架