首页 >  编程教程 >  javascript教程 >  正文

原生js 复制内容到剪切板代码实现

1181

有时候为了提升用户体验,比如在某些页面需要实现点击内容,将内容复制到剪切板,可以提升用户复制内容的操作效率;因此在实际操作中通过一定的事件触发复制功能是非常有意义的行为,下面是两种通过原生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");
}

过程:

  • document.execCommand(“Copy”) 触发复制监听事件
  • e.clipboardData.setData 将内容添加到剪切板
  • 复制完成后,取消监听事件,否则会触发多次

**应用场景:**已知复制的内容,传入内容直接调用函数

方法二:

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);
}

过程:

  • range.selectNode 创建选取内容范围
  • removeAllRanges 清除已选择的内容
  • addRanges 添加选取内容,模拟用户选取
  • document.execCommand(“Copy”) 触发复制事件
  • document.execCommand(“unselect”, “false”, null) 取消选取区域

**应用场景:**复制指定节点的内容

申明:本站内容仅代表个人观点,仅供学习参考;未经授权任何个人或组织单位不得复制、转载、摘编以及其它形式的应用! 本站文章可能使用到互联网上的资料,若对您造成困扰,请联系 kk19@foxmail.com除理 本文地址:https://www.chateach.com/it/javascript/845
相关文章
  • .gitignore不生效问题解决方法

    gitignore不生效

    git push的时候 .gitignore中已经标明忽略的文件目录下的文件,git push的时候还会出现在push的目录中,或者用git status查看状态,想要忽略的文件还是显示被追踪状态。

    1130
    • gitignore不生效
  • springboot怎么返回404页面及状态码

    springboot 404页面

    我们的项目通常来讲都是一个比较大的项目,包含了各种各样的服务。如果每个服务都以不同的方式返回异常信息,这样排查的时候就会比较凌乱。如果我们定义一个标准的异常处理体系。并在所有的服务中使用。那样开发起来就可以快速定位。页面也会更加的简单和直观。

    1439
    • springboot 404页面
  • Java实现哈希加解密(HmacSHA1、HmacMD5、HmacSHA256、HmacSHA512)

    Java哈希加解密

    什么是Hash,Java实现哈希加解密(HmacSHA1、HmacMD5、HmacSHA256、HmacSHA512),哈希算法不可逆,不同的源数据使用同样的哈希算法,可能会产生相同的哈希值,这被称之为碰撞率(collision rate),即使是 MD5 算法,碰撞率也非常小,小到几乎可以忽略不计。大约是 1.47*10的负29次方。

    2081
    • Java哈希加解密
  • centos系统如何修改超级管理员root用户名

    root用户名修改,centos系统

    centos系统修改超级管理员root用户名实例演示,只要简单的将超级管理员root用户修改掉,那么被暴力破解几率就会直线下降。

    1258
    • root用户名修改
    • centos系统
  • java中的JDK、JRE、JVM三者的区别

    JDK,JRE,JVM

    java中的JDK、JRE、JVM三者的区别,JDK是 Java 语言的软件开发工具包(SDK);JRE(Java Runtime Environment,Java运行环境),包含JVM标准实现及Java核心类库。JVM(Java Virtual Machine),即java虚拟机, java运行时的环境,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。

    959
    • JDK
    • JRE
    • JVM
  • linux环境下安装nodejs

    nodejs安装

    linux系统下安装最新版nodejs的方法,Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境。

    957
    • nodejs安装
  • Laravel的简介及其安装方法

    Laravel安装方法

    linux下使用composer的方式安装laravel 9.x版本的方法,及laravel的简介,Laravel是一套简洁、优雅的PHP Web开发框架,它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁、富于表达力。具有了一套高级的PHP ActiveRecord实现 -- Eloquent ORM。

    1111
    • Laravel安装方法
  • lnmp环境简介

    lnmp环境简介

    LNMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写。L指Linux,N指Nginx,M一般指MySQL,也可以指MariaDB,P一般指PHP,也可以指Perl或Python。

    1371
    • lnmp环境简介
  • Java如何生成随机字符串

    Java字符串

    Java如何生成随机字符串,先定义一个基础字符串(即生成的每一个随机字符串里的每一个字符都要包含在这个基础字符串里面),包含字符"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"。

    1222
    • Java字符串
  • php获取当前时间操作

    php获取时间

    在PHP语言中我们如何获取当前时间呢?只要通过date()和time()函数组合使用实现。

    1300
    • php获取时间
  • MySQL常用查询语句大全

    Mysql查询语句

    MySQL常用的查询语句大全看这里,值得收藏。MySQL数据库管理系统由瑞典的DataKonsultAB公司研发,该公司被Sun公司收购,现在Sun公司又被Oracle公司收购,因此MySQL目前属于 Oracle 旗下产品。

    961
    • Mysql查询语句
  • html网页如何禁止打印页面

    禁止打印页面

    html网页如何禁止打印页面方式,可以禁止打印键盘的快捷键组合,但是用户可以直接鼠标操作浏览器来实现打印;所以通过css来屏蔽打印内容的输出更加的合理有效,代码如下所示。

    1625
    • 禁止打印页面
  • laravel Request的所有方法详解

    laravel Request,cookie,http参数

    laravel Request的所有方法详解,laravel实现如何获取cookie、表单参数、提交的文件、laravel如何获取网址url、路径、ip、端口等。

    1516
    • laravel Request
    • cookie
    • http参数
  • Spring Boot 如何解决跨域问题

    SpringBoot跨域

    SpringBoot 如何解决跨域问题方法,CORS全称Cross-Origin Resource Sharing,意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问,那么访问的那个资源就会遇到跨域问题。

    800
    • SpringBoot跨域
  • php如何检测mysql数据库连接正确

    mysql链接检测

    php下如何测试MYSQL数据库是否连接正常。分享一个快速检测数据库连接正确的方法,选择一张有数据的表,打印其中的一个参数。能够正常的输入数据库数据那么链接觉得没有问题。

    1198
    • mysql链接检测
  • JavaScript == 与 === 区别

    == 与 === 区别

    js中==和===的区别 ==和===的区别和一些比较规则: == 在比较类型不同的变量时,会进行数据类型转化,将二者转换成数据类型相同的变量,再进行比较。对于 string、number 等基础类型,== 和 === 是有区别的 a)不同类型间比较,== 之比较 "转化成同一类型后的值" 看 "值" 是否相等,=== 如果类型不同,其结果就是不等。

    854
    • == 与 === 区别
  • SpringBoot中的异常处理的详细教程

    SpringBoot,异常处理

    SpringBoot中的异常处理的详细教程,处理用户请求出现运行时异常时直接响应给用户的是一个错误界面,对于用户的使用体验不友好。什么是全局异常处理机制,用来解决整个系统中任意一个控制器抛出异常时的统一处理入口,如何使用全局异常处理类 implements HandlerExceptionResolver,之后重写接口中的resolveException方法。

    1018
    • SpringBoot
    • 异常处理
  • Vue中基于$event实现click事件获取html元素和css样式

    click事件,$event

    Vue中实现单击click事件获取html元素和css样式的解决方法,$event是一个对象 $event是指当前触发的是什么事件(鼠标事件,键盘事件等) $event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素。

    1009
    • click事件
    • $event
-- 这已经是底线了,看看别的把! --