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 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
js日期联动示例
May 02 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
Java 生成随机字符的示例代码
Jan 13 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
python统计中文字符数量的两种方法
2019/01/31 Python
Python 如何提高元组的可读性
2019/08/26 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Python yield的用法实例分析
2020/03/06 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Python如何读写二进制数组数据
2020/08/01 Python
Python 在局部变量域中执行代码
2020/08/07 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
校庆标语集锦
2014/06/25 职场文书
2014年招生工作总结
2014/11/26 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
Nebula Graph解决风控业务实践
2022/03/31 MySQL