首页 > 其他分享 >原生js实现复制功能

原生js实现复制功能

时间:2022-12-09 18:36:35浏览次数:35  
标签:原生 body txt js 复制 dataContainer input document

h5新增了execCommand函数,就可以直接实现复制功能了,再也不用复制插件了,示例代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <script>
      function copy() {
        const txt = document.getElementById("code").innerText
        // 添加一个input元素放置需要的文本内容
        const dataContainer = document.createElement('input');
        dataContainer.value = txt;
        document.body.appendChild(dataContainer);
        // 选中并复制文本到剪切板
        dataContainer.select();
        document.execCommand('copy');
        // 移除input元素
        document.body.removeChild(dataContainer);
        alert('复制成功');
      }
    </script>
    <title>标题</title>
  </head>
  <body>
    <p><span id="code">999999</span><button onclick="copy()">复制</button></p>    
  </body>
</html>

当然,这个函数不止复制功能,更多功能研究中......

另外,同H5的其他一些新特性一样,在低版本的ios浏览器中,可能会不支持这个命令。

标签:原生,body,txt,js,复制,dataContainer,input,document
From: https://www.cnblogs.com/xyyt/p/16969699.html

相关文章

  • day35-JSON&Ajax03
    JSON&Ajax034.jQuery的Ajax请求原生Ajax请求问题分析:编写原生的Ajax要写很多的代码,还要考虑浏览器兼容问题,使用不方便在实际工作中,一般使用JavaScript的框架(比如jquer......
  • 数据库表内容复制,表格复制。
    1.不同用户之间的表数据复制对于在一个数据库上的两个用户A和B,假如需要把A下表old的数据复制到B下的new,请使用权限足够的用户登入sqlplus:insertintoB.new(select*from......
  • redis数据库—主从复制、哨兵模式、集群
    一、Redis的三种高可用方案主从复制:主从复制是高可用Redis的基础,哨兵和集群都是在主从复制基础上实现高可用的。主从复制主要实现了数据的多机备份(和同步),以及对于读......
  • nodejs 图片加水印
    nodejs图片加水印varimages=require('images');//等待加水印的图片varsourceImg=images("./image.png");//水印图片宽高最大为200pxvarwatermarkImg=ima......
  • JS——bool(布尔)
    在编程中,有时只能如果只需要两个值之一的数据类型是,可以使用YES/NO,ON/OFF,TRUE/FALSE,所以使用布尔数据类型就很适合。通常JavaScript布尔是由字面量创建的原始值,但布尔......
  • JS高程8.1.1属性的类型笔记
    1.对象概念:对象是一组属性的无序集合。2.对象属性的类型:(1)数据属性:数据属性包含一个保存数据值的位置。值会从这个位置读取,也会写入到这个位置。数据属性有四个特性描述它......
  • c#winform工作流程图 GDI+连线 原生代码不使用任何插件 流程图、思维导图、顺序流程图
    支持节点流向、逆流支持更改节点颜色支持更改节点大小支持节点指向多个节点支持导出json文件支持导入json文件支持一键清空支持拓展到其他项目的二次开发支持选中......
  • FusionCharts Free-使用JS加载-flash图表
    使用JS加载 这个JS类文件就在FusionChartsFree>JSClass文件夹下,我们把它拷贝到c:FusionChartsFusionCharts下面。现在,我们把原来的Chart.html复制一份,命名为JSCh......
  • JS 前端自适应打印
    第一种打印:首先是安装npminstall--savehtml2canvas然后在utils包importhtml2canvasfrom"html2canvas";//打印类属性、方法定义/*eslint-disable......
  • JS——Math(数学&随机方法)
    Math对象方法与其他全局对象不同,Math对象没有构造函数。方法和属性是静态的可以在不首先创建Math对象的情况下使用所有方法和属性(常量)方法描述abs(x)返回x......