-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclipboard.html
140 lines (74 loc) · 4.28 KB
/
clipboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
rd
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox ">
<div class="ibox-title">
<h5>Copy to clipboard</h5>
</div>
<div class="ibox-content">
<p>
Modern copy to clipboard features. Just 2kb without flash!
</p>
<div class="row">
<div class="col-md-6">
<h3>Copy text from another element</h3>
<p>
A pretty common use case is to copy content from another element. You can do that by adding a <code>data-clipboard-target</code> attribute in your trigger element.
</p>
<p>
The value you include on this attribute needs to match another's element selector.
</p>
<p class="text-navy font-bold" id="copytext">Please press the button and copy me!</p>
<button class="btn btn-white" data-clipboard-target="#copytext"><i class="fa fa-copy"></i> Copy</button>
<div class="m-t">
<strong>HTML markup</strong>
</div>
<pre>
<p id="copytext">Please press the button and copy me!</p>
<button class="btn btn-white" data-clipboard-target="#copytext"><i class="fa fa-copy"></i> Copy</button>
</pre>
</div>
<div class="col-md-6">
<h3>Cut text from another element</h3>
<p>
Additionally, you can define a <code>data-clipboard-action</code> attribute to specify if you want to either <code>copy</code> or <code>cut</code> content.
</p>
<textarea class="form-control" id="cuttext">This is example text that will be cuted fromt this textarea control.</textarea>
<button class="btn btn-white m-t" data-clipboard-action="cut" data-clipboard-target="#cuttext"><i class="fa fa-cut"></i> Cut to clipboard</button>
<div class="m-t">
<strong>HTML markup</strong>
</div>
<pre>
<textarea id="cuttext">This is example text that will be cuted fromt this textarea control.</textarea>
<button class="btn btn-white" data-clipboard-action="cut" data-clipboard-target="#cuttext"><i class="fa fa-cut"></i> Cut to clipboard</button>
</pre>
</div>
</div>
</div>
</div>
<div class="ibox ">
<div class="ibox-title">
<h5>Playground</h5>
</div>
<div class="ibox-content">
<strong>
Paste and test you copied text.
</strong>
<textarea class="form-control border-left m-t" style="height: 200px">
</textarea>
</div>
</div>
</div>
</div>
</div>
<!-- Mainly scripts -->
<!-- Custom and plugin javascript -->
<script src="js/common.js"></script>
<!-- Clipboard -->
<script src="js/plugins/clipboard/clipboard.min.js"></script>
<script>
$(document).ready(function (){
new Clipboard('.btn');
});
</script>