您的位置：首页 > Web前端 > JavaScript

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

2018-02-24 15:08 459 查看 
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>

 案例二

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>

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航