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 相关文章推荐
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python常用数据分析模块原理解析
2020/07/20 Python
如何在python中判断变量的类型
2020/07/29 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
信息技术培训感言
2014/03/06 职场文书
行政处罚决定书
2015/06/24 职场文书
朋友离别感言
2015/08/04 职场文书
js实现上传图片到服务器
2021/04/11 Javascript