引用：

  1. <script src="https://clipboardjs.com//dist/clipboard.min.js"></script>

示例1：

Copy 
提示：点击Copy按钮，把“hello”复制到剪贴板。 
html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>target-input</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <!-- . Define some markup -->
  10.     <input id="foo" type="text" value="hello">
  11.     <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
  12.  
  13.     <!-- . Include library -->
  14.     <script src="../dist/clipboard.min.js"></script>
  15.  
  16.     <!-- . Instantiate clipboard -->
  17.     <script>
  18.     var clipboard = new Clipboard('.btn');
  19.  
  20.     clipboard.on('success', function(e) {
  21.         console.log(e);
  22.     });
  23.  
  24.     clipboard.on('error', function(e) {
  25.         console.log(e);
  26.     });
  27.     </script>
  28. </body>
  29. </html>

示例2：

Cut 
提示：点击Cut按钮，把“hello”剪切到剪贴板。 
html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>target-textarea</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <!-- . Define some markup -->
  10.     <textarea id="bar">hello</textarea>
  11.     <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
  12.  
  13.     <!-- . Include library -->
  14.     <script src="../dist/clipboard.min.js"></script>
  15.  
  16.     <!-- . Instantiate clipboard -->
  17.     <script>
  18.     var clipboard = new Clipboard('.btn');
  19.  
  20.     clipboard.on('success', function(e) {
  21.         console.log(e);
  22.     });
  23.  
  24.     clipboard.on('error', function(e) {
  25.         console.log(e);
  26.     });
  27.     </script>
  28. </body>
  29. </html>

示例3：
hello

Copy 
提示：点击Copy按钮，把“hello”复制到剪贴板。 
html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>target-div</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <!-- . Define some markup -->
  10.     <div>hello</div>
  11.     <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
  12.  
  13.     <!-- . Include library -->
  14.     <script src="../dist/clipboard.min.js"></script>
  15.  
  16.     <!-- . Instantiate clipboard -->
  17.     <script>
  18.     var clipboard = new Clipboard('.btn');
  19.  
  20.     clipboard.on('success', function(e) {
  21.         console.log(e);
  22.     });
  23.  
  24.     clipboard.on('error', function(e) {
  25.         console.log(e);
  26.     });
  27.     </script>
  28. </body>
  29. </html>

示例4：
Copy 
提示：点击Copy按钮，把“to be or not to be”复制到剪贴板。 
html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>function-text</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <!-- . Define some markup -->
  10.     <button class="btn">Copy</button>
  11.  
  12.     <!-- . Include library -->
  13.     <script src="../dist/clipboard.min.js"></script>
  14.  
  15.     <!-- . Instantiate clipboard -->
  16.     <script>
  17.     var clipboard = new Clipboard('.btn', {
  18.         text: function() {
  19.             return 'to be or not to be';
  20.         }
  21.     });
  22.  
  23.     clipboard.on('success', function(e) {
  24.         console.log(e);
  25.     });
  26.  
  27.     clipboard.on('error', function(e) {
  28.         console.log(e);
  29.     });
  30.     </script>
  31. </body>
  32. </html>

示例5：
Copy

hello
提示：点击Copy按钮，把“hello”复制到剪贴板。 
html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>function-target</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <!-- . Define some markup -->
  10.     <button class="btn">Copy</button>
  11.     <div>hello</div>
  12.  
  13.     <!-- . Include library -->
  14.     <script src="../dist/clipboard.min.js"></script>
  15.  
  16.     <!-- . Instantiate clipboard -->
  17.     <script>
  18.     var clipboard = new Clipboard('.btn', {
  19.         target: function() {
  20.             return document.querySelector('div');
  21.         }
  22.     });
  23.  
  24.     clipboard.on('success', function(e) {
  25.         console.log(e);
  26.     });
  27.  
  28.     clipboard.on('error', function(e) {
  29.         console.log(e);
  30.     });
  31.     </script>
  32. </body>
  33. </html>

示例6：
Copy Copy Copy 
提示：
点击第一个Copy按钮，把“1”复制到剪贴板。
点击第二个Copy按钮，把“2”复制到剪贴板。
点击第三个Copy按钮，把“3”复制到剪贴板。 
html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>constructor-selector</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <!-- . Define some markup -->
  10.     <button class="btn" data-clipboard-text="">Copy</button>
  11.     <button class="btn" data-clipboard-text="">Copy</button>
  12.     <button class="btn" data-clipboard-text="">Copy</button>
  13.  
  14.     <!-- . Include library -->
  15.     <script src="../dist/clipboard.min.js"></script>
  16.  
  17.     <!-- . Instantiate clipboard by passing a string selector -->
  18.     <script>
  19.     var clipboard = new Clipboard('.btn');
  20.  
  21.     clipboard.on('success', function(e) {
  22.         console.log(e);
  23.     });
  24.  
  25.     clipboard.on('error', function(e) {
  26.         console.log(e);
  27.     });
  28.     </script>
  29. </body>
  30. </html>

示例7：
Copy Copy Copy 
提示：
点击第一个Copy按钮，把“1”复制到剪贴板。
点击第二个Copy按钮，把“2”复制到剪贴板。
点击第三个Copy按钮，把“3”复制到剪贴板。 
html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>constructor-nodelist</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <!-- . Define some markup -->
  10.     <button data-clipboard-text="">Copy</button>
  11.     <button data-clipboard-text="">Copy</button>
  12.     <button data-clipboard-text="">Copy</button>
  13.  
  14.     <!-- . Include library -->
  15.     <script src="../dist/clipboard.min.js"></script>
  16.  
  17.     <!-- . Instantiate clipboard by passing a list of HTML elements -->
  18.     <script>
  19.     var btns = document.querySelectorAll('button');
  20.     var clipboard = new Clipboard(btns);
  21.  
  22.     clipboard.on('success', function(e) {
  23.         console.log(e);
  24.     });
  25.  
  26.     clipboard.on('error', function(e) {
  27.         console.log(e);
  28.     });
  29.     </script>
  30. </body>
  31. </html>

示例8：
Copy
提示：点击Copy，把“1”复制到剪贴板。 
html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>constructor-node</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <!-- . Define some markup -->
  10.     <div id="btn" data-clipboard-text="">
  11.         <span>Copy</span>
  12.     </div>
  13.  
  14.     <!-- . Include library -->
  15.     <script src="../dist/clipboard.min.js"></script>
  16.  
  17.     <!-- . Instantiate clipboard by passing a HTML element -->
  18.     <script>
  19.     var btn = document.getElementById('btn');
  20.     var clipboard = new Clipboard(btn);
  21.  
  22.     clipboard.on('success', function(e) {
  23.         console.log(e);
  24.     });
  25.  
  26.     clipboard.on('error', function(e) {
  27.         console.log(e);
  28.     });
  29.     </script>
  30. </body>
  31. </html>

官方Demo:http://www.webkaka.com/Blog/ARCHIVES/demo/clipboard.js-master/demo/

js实现各种复制功能的更多相关文章

  1. js写的复制功能，只支持IE

    如果用js写,只能支持IE,如果想全支持,需要用jQuery的插件:jquery.zclip.js 下面是用js写的: var copyHref = function(){               ...

  2. JS代码实现复制功能

    本人没什么基础看了好久百度,不知道为什么在百度上问一个js实现copy功能会多出那么多代码出来,感觉废话一堆效果还没能达到需要复制 的效果. 然而在我看来,js复制代码 无非就那么几句罢了.原生cop ...

  3. js点击复制功能的实现

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. JS实现一键复制功能

    var copyClick = function (d) { var Url2 = $(d).parent().parent().find("#copy_value"); Url2 ...

  5. H5 页面 上使用js实现一键复制功能

    2.解决苹果手机浏览器 无法使用的问题  上面的方法在 iphone 手机 safari浏览器失效的问题 其实就是使用输入框先显示然后模拟选择复制在隐藏输入框

  6. 禁止页面复制功能 js禁止复制 禁用页面右键菜单

    <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script  t ...

  7. js禁止页面复制 禁用页面右键菜单的代码

    js实现禁止页面复制功能.禁用页面右键菜单等功能.  <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制 ...

  8. 解决clipboard.js在移动端复制失败的问题

    1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...

  9. JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单

    1.如果小伙伴们只是想实现点击某个按钮(通过click事件)实现复制功能. 那小哥哥我在这里推荐大家使用2个非常好用的插件 (1)clipboard.js:纯js插件,无需flash,相对来说更轻量级 ...

随机推荐

  1. 42-python基础-python3-字符串-原始字符串

    原始字符串 可以在字符串开始的引号之前加上 r,使它成为原始字符串. “原始字符串”完全忽略所有的转义字符,打印出字符串中所有的倒斜杠. 如果输入的字符串包含许多倒斜杠,比如正则表达式字符串,那么原始 ...

  2. uoj#186 【UR #13】Yist

    题目 orz myy 首先注意到答案有单调性,于是我们可以考虑二分一个\(x\),之后去判断一下每次只使用长度为\(x\)的区间能否删出目标序列 显然我们应该贪心地删除需要删除元素中最小的那一个,感性 ...

  3. Spring整合Hibernate报错：annotatedClasses is not writable or has an invalid setter method

    Spring 整合Hibernate时报错: org.springframework.beans.factory.BeanCreationException: Error creating bean ...

  4. JS提示信息来检测相应id的标签

    2015-07~2015-08 (其中$为document.getElementById()) 使用span提示信息来检测相应id的标签,没有返回值 infoTips("LRYH" ...

  5. SiteMesh 2.X 的使用（网页结构模板）

    SiteMesh是基于Servlet的filter的,即过滤流.它是通过截取reponse,并进行装饰后再交付给客户. 其中涉及到两个名词: 装饰页面(decorator page)和 "被 ...

  6. python之数据序列转换并同时计算数据

    问题 你需要在数据序列上执行聚集函数(比如 sum() , min() , max() ), 但是首先你需要先转换或者过滤数据 解决方案 一个非常优雅的方式去结合数据计算与转换就是使用一个生成器表达式 ...

  7. 【记录】gitLab git命令add commit fetch pull push

    最近项目使用git进行版本控制,由于之前用svn,所以对git不是太熟悉,网上一通乱找git各命令含义, 以下内容感觉讲的很详细,可以很清楚理解git提交流程,博主把重要的信息用红字标注了,更加显眼. ...

  8. linux下nano命令大全

    nano是一个字符终端的文本编辑器,有点像DOS下的editor程序.它比vi/vim要简单得多,比较适合Linux初学者使用.某些Linux发行版的默认编辑器就是nano. nano命令可以打开指定 ...

  9. 项目案例之Pipeline流水线发布JAVA项目（三）

    项目案例之Pipeline流水线发布JAVA项目(三) 链接:https://pan.baidu.com/s/1NZZbocZuNwtQS0eGkkglXQ 提取码:z7gj 复制这段内容后打开百度网 ...

  10. Centos7搭建SkyWalking分布式追踪，以mysql为存储

    Skywalking专门为微服务架构和云原生架构系统而设计并且支持分布式链路追踪的APM系统,即应用性能监控系统,为微服务架构和云原生架构系统设计.它通过探针自动收集所需的指标,并进行分布式追踪.通过 ...