复制粘贴之插件（clipboard.min.js）不需要安装flash

最新推荐文章于 2024-06-18 09:13:49 发布

weixin_34356138

最新推荐文章于 2024-06-18 09:13:49 发布

阅读量573

点赞数

文章标签： javascript ViewUI

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>ZeroClipboard Test</title>
 5 <meta charset="utf-8">
 6 <script type="text/javascript" src="clipboard.min.js"></script>
 7 <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
 8 </head>
 9 <body>
10 
11 <input id="t" type="text"/>数据输出测试<br>
12 <textarea id="t2"></textarea><br>
13 <!--测试1-->
14 <!--button按钮测试，需要复制的值放在属性  data-clipboard-text中<br>-->
15 <button class="btn" data-clipboard-text="测试1">点击测试1</button><br><br>
16 
17 <!--测试2-->
18 <!--a按钮测试，需要复制的值放在属性 data-clipboard-text中<br>-->
19 <a class="a" data-clipboard-text="测试2">点击测试2</a><br><br>
20 
21 <!--测试3-->
22 <!--测试，通过按钮的data-clipboard-target属性获取指定标签中的值-->
23 <div>测试3</div>
24  <button class="btn2" data-clipboard-action="copy" data-clipboard-target="div">点击测试3</button><br><br>
25 
26  <!--测试4-->
27  <!--测试，通过按钮的data-clipboard-target属性获取指id的标签中的值中 -->
28  <button class="btn3" data-clipboard-action="copy" data-clipboard-target="#t2">点击测试4</button>
29 
30 </body>
31 </html>
32 <script type="text/javascript">
33 <!--测试1-->
34 $(document).ready(function(){  
35    var clipboard = new Clipboard('.btn'); 
36    clipboard.on('success', function(e) {
37        console.log(e);
38         alert("测试1复制成功！")
39         });
40    clipboard.on('error', function(e) {
41                console.log(e);
42                alert("测试1复制失败！请手动复制")
43          });
44 })
45 <!--测试2-->
46 $(document).ready(function(){  
47    var clipboard1 = new Clipboard('.a'); 
48    clipboard1.on('success', function(e) {
49        console.log(e);
50         alert("测试2复制成功！")
51         });
52    clipboard1.on('error', function(e) {
53                console.log(e);
54                alert("测试2复制失败！请手动复制")
55          });
56 })
57 <!--测试3-->
58 $(document).ready(function(){  
59    var clipboard2 = new Clipboard('.btn2'); 
60    clipboard2.on('success', function(e) {
61        console.log(e);
62         alert("测试3复制成功！")
63         });
64    clipboard2.on('error', function(e) {
65                console.log(e);
66                alert("测试3复制失败！请手动复制")
67          });
68 })
69 <!--测试4-->
70 $(document).ready(function(){  
71    var clipboard3 = new Clipboard('.btn3'); 
72    clipboard3.on('success', function(e) {
73        console.log(e);
74         alert("测试4复制成功！")
75         });
76    clipboard3.on('error', function(e) {
77                console.log(e);
78                alert("测试4复制失败！请手动复制")
79          });
80 })
81 </script>

案例二

假如你现在还在为自己的技术担忧，假如你现在想提升自己的工资，假如你想在职场上获得更多的话语权，假如你想顺利的度过35岁这个魔咒，假如你想体验BAT的工作环境，那么现在请我们一起开启提升技术之旅吧，详情请点击http://106.12.206.16:8080/qingruihappy/index.html

 1 <script src="clipboard.min.js"></script>
 2  <textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra l¨¢ , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. M¨¦ faiz elementum girarzis, nisi eros vermeio, in elementis m¨¦ pra quem ¨¦ amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
 3 
 4 <!-- Trigger -->
 5 <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
 6     Cut to clipboard
 7 </button>
 8 <script>
 9 var clipboard = new Clipboard('.btn');
10 clipboard.on('success', function(e) {
11     console.info('Action:', e.action);
12     console.info('Text:', e.text);
13     console.info('Trigger:', e.trigger);
14 alert("¸´ÖÆ³É¹¦");
15     e.clearSelection();
16 });
17 
18 clipboard.on('error', function(e) {
19     console.error('Action:', e.action);
20     console.error('Trigger:', e.trigger);
21 });
22 </script>

weixin_34356138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制粘贴之插件（clipboard.min.js）不需要安装flash

1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;title&gt;ZeroClipboard Test&lt;/title&gt; 5 &lt;meta charset="utf-8"&gt; 6 &lt;script type="text/javascript" src=&quo
复制链接

扫一扫