使用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 addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
Jquery 扩展方法
May 06 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
javascript页面倒计时实例
Jul 25 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
js选择器全面解析
2016/06/27 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
Python二维码生成识别实例详解
2019/07/16 Python
python入门之基础语法学习笔记
2020/02/08 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
给学校的建议书
2014/03/12 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
停电通知范文
2015/04/16 职场文书
少先队中队工作总结
2015/08/14 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
Python中的xlrd模块使用整理
2021/06/15 Python
nginx配置指令之server_name的具体使用
2022/08/14 Servers
Java使用HttpClient实现文件下载
2022/08/14 Java/Android