点击按钮复制到剪贴板 js

admin · 发表于 2018-7-31 10:14:54

<blockquote><span style="font-family: Arial, Helvetica, sans-serif;">案例一：</span>

复制代码

</pre><pre code_snippet_id="1755225" snippet_file_name="blog_20160711_1_4917192" name="code" class="html"><!DOCTYPE html>( G# s% g# Q2 x7 y5 m8 O0 s5 _
<html lang="en">
' W$ h& G) M7 Z F4 `
<head>+ N5 h C0 }7 Z7 t: S$ |1 S; E
<meta charset="UTF-8">
3 L8 j% z( q; i8 m2 V
<meta name="viewport" content="width=device-width, initial-scale=1">
- c- Q1 U( h! m( E
<title>Document</title>
' E( F2 h; V- f
</head>
$ h. v% j7 T7 k
<body>
# U' r/ @. p5 Y
<script data-cfhash='f9e31' type="text/javascript">8 C4 i% k$ S+ ]+ j* s/ f
function jsCopy(){( f1 P* S! o) e7 Y: D1 P0 A
var e=document.getElementById("copy-num");//对象是copy-num17 x8 a$ a! D. c" u
e.select(); //选择对象' x& a; Z* o( P3 Y
document.execCommand("Copy"); //执行浏览器复制命令0 b! Y. y) @0 l$ Q7 U2 ]
alert("复制成功");' i$ V( v2 W( E
}
9 U- I Z$ m* t. m% d
/* <![CDATA[ */
/ P3 ]; f; k& R2 {& m! }
!
2 D* ]! y6 D" S3 \3 Q- t
function() {1 z" I! l3 I6 m' |- ]4 `
try {
' f' l4 c2 ]( i6 ^
var t = "currentScript" in document ? document.currentScript: function() {
! ~/ f1 y- X8 u4 X! l6 A
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]5 a, @0 c, t) b' G
} ();
" g/ z& h6 X$ g
if (t && t.previousSibling) {, K) E! u% x) M- s/ Q, @
var e, r, n, i, c = t.previousSibling,
2 d! _6 ?0 u* }, O
a = c.getAttribute("data-cfemail"); V. G" R, w1 Z8 F
if (a) {
+ `* M6 ^4 H) r- T
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,- M3 }& J+ a: U, u; K! c9 }
e += String.fromCharCode(i);4 G+ p4 c$ H0 @3 ~! H j
e = document.createTextNode(e),
# B6 l$ O; v9 b: w
c.parentNode.replaceChild(e, c)% W3 P1 V7 Z @: I& [5 M: e3 N! w
}7 I7 d- L0 f6 J `
t.parentNode.removeChild(t);
6 H7 U1 s5 X% E1 E; A. e/ z+ Y
}
. ]0 C2 v g' A
} catch(u) {}8 R4 k' h5 g- k1 K' C
} ()7 z2 R# W7 }! x1 C; _
/* ]]> */
) a8 C& t6 ^) E- R5 y
1 M# B- ] E! {: [7 \6 ?
</script>7 u, z: m/ \1 j2 b0 p1 Z
<div class="nav navbar-top-links navbar-right">" K5 d+ I3 i8 Q$ f- S6 t
<li>推广链接：</li>
+ u0 ~8 y) U* I" g1 t2 o
! K) ?. Z% F3 w
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>0 Z9 b/ N u' d! a
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
( p% b) c! h: c) R' [
* m1 O, `9 S e0 M& q$ p, G
</div>( S5 k8 H' [, P% M6 n
</body>7 u( ]; `9 Z: m) O
</html>, \' e L' c: l" x- l

复制代码

案例二：

<html># W6 P& _7 |) J/ t
<head>
+ F6 {: q' K7 b/ r
<meta charset="UTF-8">* _/ H* d, Y8 y% v* Z. r* h8 Y
<meta name="viewport" content="width=device-width, initial-scale=1">% D+ ]$ q8 Z) B$ W ]- F
<title>Zero Clipboard Test</title>; R |4 s0 H6 ^& p& v5 W1 f7 H1 j
</script>
' D$ y+ r4 g1 h. g: g9 G4 F3 m4 C4 d
</head>8 p; Q8 E$ ^. [# ^7 a4 Z
<body>1 m) K% c* D3 A, {# p5 b, w
<script type="text/javascript">
' q, |' r, o& ~% Q, p: {" g5 x1 w( a
function jsCopy(){ " L4 \, \/ L5 i9 M* z
var e=document.getElementById("contents");//对象是contents 6 y2 [& x. ?1 i: g% H
e.select(); //选择对象
, H/ q$ G- ?7 r/ a# @7 U
tag=document.execCommand("Copy"); //执行浏览器复制命令
1 `& {4 ?4 U4 @' F
if(tag){! d; |" S8 a: P6 o8 Q3 B* L& n" R
alert('复制内容成功');
* f5 U4 w: B' | o: l6 ^5 P0 E- d
}# D! F% _3 B5 M, ] E
} 0 J( b1 [5 H4 z2 R
/ ~7 X1 ?$ \: `: F8 t; V5 T
</script>
) C+ j7 v: [0 {" [
<textarea id="contents" cols="40" rows="5"></textarea>
' }; K% w4 c/ r) x; _) h7 N( s
<br />2 a% _$ L8 b' C- t
<input type="button" onClick="jsCopy();" value="复制" />
6 V* {$ s3 E, P0 v. s8 Q
</body>" F- V+ K0 Z& ^. q! b+ S
</html>
5 P( }' o6 V* T! V! r3 R5 y

复制代码

以上都可以执行，亲自测试！

帐号		自动登录	找回密码
密码			立即注册

[js学习资料] 点击按钮复制到剪贴板 js