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 04 Javascript
JQuery 前台切换网站的样式实现
Jun 22 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
JScript中的条件注释详解
Apr 24 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
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 Smarty 字符比较代码
2011/02/27 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
php简单中奖算法(实例)
2017/08/15 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP实现文件上传与下载
2020/08/28 PHP
新闻内页-JS分页
2006/06/07 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
js实现简单页面全屏
2019/09/17 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
python多线程方式执行多个bat代码
2016/06/07 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
python装饰器常见使用方法分析
2019/06/26 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
python打包生成so文件的实现
2020/10/30 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
人力资源专员岗位职责
2014/01/30 职场文书
高中军训感想300字
2014/03/04 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
本科应届生求职信
2014/08/05 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers