方法一:

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) 取消选取区域

应用场景:

复制指定节点的内容

原生js 复制内容到剪切板的更多相关文章

  1. js复制内容到剪切板

    注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点  这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...

  2. js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

      最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...

  3. 在多浏览器使用JS复制内容到剪切板,无需插件

    最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...

  4. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  5. js 复制内容到剪切板

    function oCopy(objname){//只兼容IE var obj = $(objname); obj.select(); js=obj.createTextRange(); js.exe ...

  6. JS禁止右键查看源码,禁止复制,复制内容到剪切板

    有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...

  7. javascript复制内容到剪切板/网页上的复制按钮的实现

    javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...

  8. js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

    Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...

  9. 兼容安卓和ios实现一键复制内容到剪切板

    实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

随机推荐

  1. Havok Physics 2012(2)

    目录 Havok Physics 2012 Chapter 2. Creating a Simulation 创建一个模拟世界 1. Creating Physics 2012 Objects Hav ...

  2. 通过javascript 执行环境理解她

    古往今来最难的学的武功(javascript)算其一. 欲练此功必先自宫,愿少侠习的此功,笑傲江湖. 你将了解 执行栈(Execution stack) 执行上下文(Execution Context ...

  3. 新手如何正确安装python,视图详解

    今天教新手如何安装python,因为Python是跨平台的,它可以运行在Windows.Mac和各种Linux/Unix系统上.在Windows上写Python程序,放到Linux上也是能够运行的.学 ...

  4. 力扣(LeetCode)二进制求和 个人题解

    给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1" 输出: ...

  5. Python标准类型的分类

    Python有3种不同的模型可以帮助对基本类型进行分类,这些类型更好的理解类型之间的相互关系以及他们的工作原理. 1 存储模型    能保存单个字面对象的类型,称为原子或标量存储:    能保存多个对 ...

  6. Hadoop运行模式

    Hadoop运行模式 (1)本地模式(默认模式): 不需要启用单独进程,直接可以运行,测试和开发时使用. 即在一台机器上进行操作,仅为单机版. 本地运行Hadoop官方MapReduce案例 操作命令 ...

  7. wordpress小程序安装教程

    推荐服务器特价优惠注册即可购买,1G双核一年只要88,真的是白菜价格,点击下面图片即可进入购买地址. 开源小程序发布一段时间了,很多人最近咨询了关于小程序的教程,实在太忙了,抽空写个基本的安装教程. ...

  8. Stream系列(一)Filter方法使用

    Filter 是过滤器,也可以当查询方法使用 EmployeeTestCase.java package com.example.demo; import lombok.extern.log4j.Lo ...

  9. 浅谈集群版Redis和Gossip协议

    昨天的文章写了关于分布式系统中一致性哈希算法的问题,文末提了一下Redis-Cluster对于一致性哈希算法的实现方案,今天来看一下Redis-Cluster和其中的重要概念Gossip协议. 1.R ...

  10. 是谁,在敲打我窗-CSS雨滴动画效果

    1.扯闲篇 是谁在敲打我窗  是谁在撩动琴弦  那一段被遗忘的时光 渐渐地回升出我心坎  是谁在敲打我窗  是谁在撩动琴弦 记忆中那欢乐的情景  慢慢地浮现在我的脑海 那缓缓飘落的小雨  不停地打在我 ...