js实现复制粘贴的两种方法


Posted in Javascript onDecember 04, 2020

本文实例为大家分享了js实现复制粘贴的具体代码,供大家参考,具体内容如下

一、前沿

界面需要复制功能,所以就写了一个作为简单记录

二、方法、推荐第二种。

1、第一种方法

1)、通过 document.execCommand('copy')
2)、前端代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>constructor-nodelist</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>

</head>
<body>
<button class="copy_file" onclick="copyText('copy_file')">点我复制</button>
<a id="copy_file" href="复制内容" ></a>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
function copyText(str_file) {
 const btn = document.querySelector('.'+str_file);
 var copy_val = document.getElementById(str_file)
 var copy_file = copy_val.getAttribute("href");
 btn.addEventListener('click',() => {
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.setAttribute('value', copy_file);
  input.select();
  if (document.execCommand('copy')) {
   document.execCommand('copy');
   swal("复制成功!","success");
  }
  document.body.removeChild(input);
 })
}

</script>
</body>

3)、总结:主要是通过 class和id 来复制 a标签中的 href,把复制好的内容放到 生成的input标签中,然后复制结束把 input标签给remove,这个你复制内容自行发挥,和修改 js。
4)、问题:第一次点击不生效,需要点击两次,暂时不解决

2、第二种方法

1)、通过 ClipboardJS 来实现 内容的复制,推荐这个
2)、git地址:clipboardjs
3)、前端代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- 请自行去git项目下载 js-->
 <script src="./clipboard.min.js"></script>
 <link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
 <script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>

<button id="btn" data-clipboard-text="str_555" onclick="copyText()">
 <span>Copy</span>
</button>
</body>
</html>

<script>
function copyText() {
 var btn = document.getElementById('btn');
 console.log(btn);
  var clipboard = new ClipboardJS(btn);
<!--  var clipboard = new ClipboardJS(btn, {-->
<!--   container: document.getElementById('btn')-->
<!--  });--> 如果你的项目是 bootstrap框架,请使用这个
  clipboard.on('success', function(e) {
   console.log(e);
   swal("复制成功!","success");
   clipboard.destroy();
  });

  clipboard.on('error', function(e) {
   console.log(e);
   swal("复制失败","error");
   clipboard.destroy();
  });
}
</script>

3)、总结:请一定要仔细阅读 文档。这个项目还是非常强大的,强烈推荐这个。

4)、问题:也是遇到了 第一次复制不生效的问题,暂时不解决了。

三、总结

1、都遇到了 第一次复制不生效的问题,后续解决把,都采用了 sweetalert 。
2、个人都只在 谷歌和火狐浏览器实验了,都可以用,如果其他浏览器版本不能用,请自行查阅其他文章,欢迎沟通、指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 #Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 #Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 #Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 #Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 #Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
You might like
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
浅谈react 同构之样式直出
2017/11/07 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
python协程用法实例分析
2015/06/04 Python
Python过滤列表用法实例分析
2016/04/29 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
在keras里实现自定义上采样层
2020/06/28 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
民警个人对照检查剖析材料
2014/09/17 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
电力工程合作意向书
2015/05/11 职场文书
可可西里观后感
2015/06/08 职场文书
《静夜思》教学反思
2016/02/17 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Mysql中常用的join连接方式
2022/05/11 MySQL