使用clipboard.js实现复制功能的示例代码


Posted in Javascript onOctober 16, 2017

最近在工作中有一个需求,就是需要使用一个按钮实现相应内容的复制。在网上找了很多解决方案,最后对比之下选择了clipboard.js插件来进行实现。因为它不依靠flash以及其他框架,而且体积小使用简单兼容性也好。下面简单介绍一下它的用法。

引入插件,可以下载,也可以使用第三方cdn。

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

对于HTML来说,我们有两种用法。

第一种

//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target='#copyValue'>复制</button>
//js部分
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
 e.clearSelection();
 alert('复制成功');
 });
clipboard.on('error',function(e){
 e.clearSelection();
 alert('复制失败');
 });

说明:如果我们使用按钮复制的是另一个元素的内容,则我们可以使用这种方法。此时将按钮称为触发元素,被复制的元素称为目标元素。此时data-clipboard-target的值为目标元素的选择器,而data-clipboard-target的属性被设置在触发元素上。new Clipboard()为实例化对象,参数可以是HTML元素,元素选择器。有success和error两个事件可以供我们监听,实现自己的逻辑。因为复制完成后,目标元素会处于选中状态,所以我们需要e.clearSelection()取消目标元素的选中状态。
优点:复制的内容可以是动态的,目标元素的值发生变化,复制的值也发生变化。

适用场景:复制内容可变,不固定。

第二种

//html部分
<button type="button" data-clipboard-text='复制内容'>复制</button>
//js部分
new Clipboard('button');

说明:data-clipboard-text的值为你要复制的内容。无目标元素,只有触发元素。

缺点:复制的内容是静态的,不变的,提前设置好的。

适用场景:复制内容固定不变

对于以上缺点,我们可以优化如下,使之复制的内容也是动态的。

//html部分
 <input type="text" id="copyValue" />
 <button type="button" id="copy">复制</button>
//js
$('#copy').on('click', function () {
 var value = $('#copyValue').val();
 $('#copy').attr('data-clipboard-text', value);
 var clipboard = new Clipboard('#copy');
 clipboard.on('success', function (e) {
 alert('复制成功');
 });
 clipboard.on('error', function (e) {
 alert('复制失败');
 });
})

接着这里晒出最常用的几种方式,以供不时之需。

function-target

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>function-target</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 1. Define some markup -->
  <button class="btn">Copy</button>
  <div>hello</div>

  <!-- 2. Include library -->
  <script src="../dist/clipboard.min.js"></script>

  <!-- 3. Instantiate clipboard -->
  <script>
  var clipboard = new ClipboardJS('.btn', {
    target: function() {
      return document.querySelector('div');
    }
  });

  clipboard.on('success', function(e) {
    //console.log(e);
    alert('复制成功!')
  });

  clipboard.on('error', function(e) {
    console.log(e);
  });
  </script>
</body>
</html>

function-text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>function-text</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 1. Define some markup -->
  <button class="btn">Copy</button>

  <!-- 2. Include library -->
  <script src="../dist/clipboard.min.js"></script>

  <!-- 3. Instantiate clipboard -->
  <script>
  var clipboard = new ClipboardJS('.btn', {
    text: function() {
      return 'to be or not to be';
    }
  });

  clipboard.on('success', function(e) {
    console.log(e);
  });

  clipboard.on('error', function(e) {
    console.log(e);
  });
  </script>
</body>
</html>

target-div

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>target-div</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 1. Define some markup -->
  <span class="copy_content">hello 123</span>
  <button class="btn" data-clipboard-action="copy" data-clipboard-target=".copy_content">Copy</button>

  <!-- 2. Include library -->
  <script src="../dist/clipboard.min.js"></script>

  <!-- 3. Instantiate clipboard -->
  <script>
  var clipboard = new ClipboardJS('.btn');

  clipboard.on('success', function(e) {
    console.log(e);
  });

  clipboard.on('error', function(e) {
    console.log(e);
  });
  </script>
</body>
</html>

target-input

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>target-input</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 1. Define some markup -->
  <input id="foo" type="text" value="hello">
  <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

  <!-- 2. Include library -->
  <script src="../dist/clipboard.min.js"></script>

  <!-- 3. Instantiate clipboard -->
  <script>
  var clipboard = new ClipboardJS('.btn');

  clipboard.on('success', function(e) {
    console.log(e);
  });

  clipboard.on('error', function(e) {
    console.log(e);
  });
  </script>
</body>
</html>

target-textarea

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>target-textarea</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 1. Define some markup -->
  <textarea id="bar">hello</textarea>
  <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>

  <!-- 2. Include library -->
  <script src="../dist/clipboard.min.js"></script>

  <!-- 3. Instantiate clipboard -->
  <script>
  var clipboard = new ClipboardJS('.btn');

  clipboard.on('success', function(e) {
    console.log(e);
  });

  clipboard.on('error', function(e) {
    console.log(e);
  });
  </script>
</body>
</html>

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

Javascript 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 #Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 #Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 #Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 #Javascript
AngularJS实现注册表单验证功能
Oct 16 #Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 #Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 #Javascript
You might like
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python验证身份证信息实例代码
2019/05/06 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
大学校庆策划书
2014/01/31 职场文书
劳资员岗位职责
2015/02/13 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android