使用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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
js实现简单锁屏功能实例
May 27 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
vue结合element-ui使用示例
Jan 24 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
Django数据统计功能count()的使用
2020/11/30 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
项目合作协议书
2014/04/16 职场文书
2014年材料员工作总结
2014/11/19 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
oracle数据库去除重复数据
2022/05/20 Oracle