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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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批量上传图片的具体实现方法介绍.
2014/02/26 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
php二维码生成以及下载实现
2017/09/28 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
jquery层次选择器的介绍
2019/01/18 jQuery
React 实现车牌键盘的示例代码
2019/12/20 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python切片知识解析
2016/03/06 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python中的Numpy矩阵操作
2018/08/12 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
医科大学生的自我评价
2013/12/04 职场文书
校本教研工作方案
2014/01/14 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
2015年端午节活动总结
2015/02/11 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js