js如何实现内容复制

简介: js如何实现内容复制

在JavaScript中,实现内容复制的原理可以通过使用剪贴板API来实现。剪贴板API提供了复制和粘贴文本内容的功能。

  1. 首先,创建一个按钮或触发复制操作的事件,创建一个textarea元素,在按钮的点击事件处理程序中,将需要复制的内容赋值给textarea的value属性。
<div class="content">
  <p id="text">18336072281</p>
  <textarea id="input">18336072281</textarea>
  <button onclick="copyText()">复制</button>
</div>
//然后设置css
  .content {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #input {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      z-index: -10;
    }


js的具体实现操作如下:

function copyText() {
  var text = document.getElementById("text").innerText;
  var input = document.getElementById("input");
  input.value = text; 
  input.select(); 
    document.execCommand("copy"); 
}


execCommand()方法在一些浏览器中已经被弃用,但仍然可以在大多数现代浏览器中正常工作。另外,剪贴板API的使用可能受到浏览器安全策略的限制,因此在某些情况下可能无法正常工作。

目录
相关文章
|
JavaScript 前端开发 API
浅谈Vue3——父子组件传值
浅谈Vue3——父子组件传值
721 0
|
Java Maven 开发者
maven项目中官方setting.xml文件
`settings.xml` 是 Maven 的配置文件,用于定义用户或全局级别的构建行为。它包含本地仓库路径、网络代理、服务器认证、仓库镜像及构建配置文件等设置,帮助开发者根据环境定制 Maven 行为,提升构建效率与灵活性。
1041 0
|
Java Maven
解决 idea maven plugins 报红波浪线
解决 idea maven plugins 报红波浪线
2676 5
|
存储 缓存 监控
MySQL 8.0中查询缓存的废弃与原因分析
MySQL 8.0中查询缓存的废弃与原因分析
840 1
|
数据可视化 JavaScript
echarts饼装图自定义图例和扇形区的文字
最近因为工作需要,需要开发一个大屏,后台给的数据是这个的,echarts是默认将数据data例的name属性作为图例和扇形图上展示文本,这里我需要自定义图例信息和内容,通过这篇文章,记录下如何修改这些内容,基于js和vue2,datav
1128 3
|
存储 大数据 关系型数据库
从 ClickHouse 到阿里云数据库 SelectDB 内核 Apache Doris:快成物流的数智化货运应用实践
目前已经部署在 2 套生产集群,存储数据总量达百亿规模,覆盖实时数仓、BI 多维分析、用户画像、货运轨迹信息系统等业务场景。
607 0
|
缓存 JavaScript 前端开发
老程序员分享:js刷新页面得重新加载和页面的刷新
老程序员分享:js刷新页面得重新加载和页面的刷新
257 0
Linux 命令 `bg`:将作业放到后台执行
`bg` 命令在 Linux 中用于将挂起的作业放到后台执行,允许同时处理多个任务。通过 `Ctrl + Z` 暂停作业,然后使用 `bg`(可指定作业编号)使其继续后台运行。配合 `jobs` 查看后台作业状态,`fg` 将作业带回前台,`kill` 结束作业。这些工具帮助用户更高效地管理终端作业。
|
JavaScript 算法 数据可视化
antv/g6使用教程及图配置
antv/g6使用教程及图配置
3109 0
|
JavaScript 前端开发 API
Vue.js:构建现代化Web应用的灵活选择
Vue.js:构建现代化Web应用的灵活选择
448 0