原生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 ...
随机推荐
- js在字符串中加入一段字符串
在这个功能的实现主要是slice()方法的掌握 arrayObject.slice(start,end) start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说 ...
- 阿里云ECS服务器部署HADOOP集群(二):HBase完全分布式集群搭建(使用外置ZooKeeper)
本篇将在阿里云ECS服务器部署HADOOP集群(一):Hadoop完全分布式集群环境搭建的基础上搭建,多添加了一个 datanode 节点 . 1 节点环境介绍: 1.1 环境介绍: 服务器:三台阿里 ...
- mac中安装Jenkins+jdk
Jenkins是基于Java开发的一种持续集成工具,用于持续的软件版本发布/测试项目,并监控外部调用执行的工作.简单来说就是自动化测试+部署. 首先我们需要安装jdk,注意,目前jenkins只支持j ...
- selenium针对浏览器滚动条的操作
我们在实际自动化测试过程中,肯定会遇到当前页面显示不到我们定位的元素.这就需要下拉滚动条才能显示出我们的元素: 而滚动条的按钮又是我们定位不到的,所以需要使用js脚本来完成: 1.先来说我们的下拉滚动 ...
- go中的关键字-go(上)
1. goroutine的使用 在Go语言中,表达式go f(x, y, z)会启动一个新的goroutine运行函数f(x, y, z),创建一个并发任务单元.即go关键字可以用来开启一个gorou ...
- Android中常见的设计模式
前言: Android开发的设计模式,基本设计思想源于java的设计模式,java的设计模式有N多种,据不完全统计,迄今为止,网络出现最频繁的大概有23种.Java只是一门开发语言,学会并掌握这门语言 ...
- 20191019-3 alpha week 2/2 Scrum立会报告+燃尽图 03
此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9799 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩昊 ...
- PHP安全之道学习笔记2:编码安全指南
编码安全指南 编程本身就应该是一门艺术,而安全编程更是一种在刀尖上舞蹈的艺术,不仅要小心脚下的锋利寒刃,更要小心来自网络黑客或攻击者的狂轰乱炸. - by code artist 1.hash比较的缺 ...
- 协议分层(因特网5层模型)及7层OSI参考模型
目录 因特网5层模型及7层OSI参考模型 分层的体系结构: 应用层(软件) 运输层(软件) 网络层(硬件软件混合) 链路层(硬件) 物理层(硬件) OSI模型 表示层 会话层 封装 因特网5层模型及7 ...
- scrapy框架介绍及安装
什么是scrapy框架? scrapy框架的安装 1.windowes下的安装 Python 2 / 3升级pip版本: pip install --upgrade pip 通过pip 安装 Scra ...