点击按钮复制到剪贴板 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>
7 N( s7 \6 G8 m, f g
<html lang="en">+ S0 |: ^2 p2 b \ F
<head>; H% p9 e9 c, n3 ]' i
<meta charset="UTF-8">
- U1 U' W z# Y1 ?. A( y. _2 W
<meta name="viewport" content="width=device-width, initial-scale=1">
( U* @5 F) e/ b5 A0 Y9 K# C
<title>Document</title>' W+ e0 B) X, _
</head>. T% b7 m/ P% c, z( r8 q$ C) z
<body>% f' p3 T D4 k5 I1 a7 X
<script data-cfhash='f9e31' type="text/javascript"> D) a* a" D! u- O3 i, t) U+ H$ F
function jsCopy(){
0 z$ d9 P& ^, M3 ~, m
var e=document.getElementById("copy-num");//对象是copy-num1& J$ g: W: B' B8 o6 z$ x$ c* ]) J1 t
e.select(); //选择对象4 o( i- j4 H% H, R: M; k* V2 J
document.execCommand("Copy"); //执行浏览器复制命令: R) o# z0 L" _/ P
alert("复制成功");" z, r+ R) f1 t8 i$ Z: {
}7 T2 Y1 B2 _1 I6 Z+ a5 w
/* <![CDATA[ */- _; ?4 M, r, Q' P0 x( q- @
!9 _1 F6 u, f6 A) O" o1 ^
function() {
# U+ J8 t; s9 L+ X9 e" q1 X, a' w8 A
try {
2 y. \+ [- c( l
var t = "currentScript" in document ? document.currentScript: function() {
5 s9 S! U: Q, W$ q6 W* Z2 W* w$ i
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]' U. x7 u/ n8 C# V7 c2 @
} ();5 j1 {. R& L- o- x# c v- x9 w
if (t && t.previousSibling) {1 E3 h5 x$ ~7 T) W5 v. y
var e, r, n, i, c = t.previousSibling,' S! n; F# z5 z& v/ l0 A
a = c.getAttribute("data-cfemail");
d% B( X! s) l
if (a) {
' B; O! H1 }1 p6 t8 j
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
6 a1 ^8 Z+ j7 m: h0 W
e += String.fromCharCode(i);4 x: y& `: T6 ^- @1 ^$ c
e = document.createTextNode(e),
# X, \( a/ Z; X/ R
c.parentNode.replaceChild(e, c)
2 i+ P+ |/ C& i+ F2 _
}: p! q3 z8 k6 }+ P0 R
t.parentNode.removeChild(t);
; Q$ k1 A& Q6 u" Z* I& @
}# C+ ~" C7 C2 I6 ~/ b$ R' {+ n# h
} catch(u) {}
2 z& D( f; n( f0 a+ l+ k3 h* \
} ()+ A) F' U/ r1 X7 J
/* ]]> */
- q8 [7 L2 |/ @. I; A( h; \
9 U: r. y% ?& l& R6 R+ ~5 a
</script>
I N( i; P( f; j5 W
<div class="nav navbar-top-links navbar-right">8 Z6 m6 p: g3 n: z( i* V
<li>推广链接：</li>
: l6 Y$ F+ x$ j, z$ _
, c8 s X8 }- i' Z. k6 D
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>
# t! A3 a/ q' S, M
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>) B0 U; `0 e% B: V8 ~9 [+ A
1 H. k$ ]% x0 r" ?
</div>7 ~" h& O/ t- _$ g) u
</body>
1 b! P G; D2 |# p7 [/ i; f" L
</html>
9 l2 v( e2 ^* e; G

复制代码

案例二：

<html>
8 H# g2 N z! [- H/ d2 q" L
<head>
9 D4 W6 M: _' {* _0 D
<meta charset="UTF-8">
( v+ C$ {$ c% X# n5 ?5 p, Y+ V
<meta name="viewport" content="width=device-width, initial-scale=1">
/ f0 Y( H0 l! O: V/ G! k
<title>Zero Clipboard Test</title>0 F( h+ ?( v7 W' G+ A4 z
</script>5 q- E6 D" \0 j% M0 |0 [) f* Z$ S
</head>) T* @6 H" G* }8 J5 v" J3 d
<body>
# H; D" m* R4 {7 E
<script type="text/javascript"> ' G9 ?# P4 N) K1 E
function jsCopy(){ ! D% z% p3 N7 J f x8 e( y
var e=document.getElementById("contents");//对象是contents
8 T( C4 [ ^6 ^3 o. E
e.select(); //选择对象
( s8 M/ v& S* A
tag=document.execCommand("Copy"); //执行浏览器复制命令
, B9 [. Y" W5 v" N X$ ~2 f
if(tag){8 S5 E* b0 K3 W& s9 R% L) }1 L
alert('复制内容成功');. U3 K$ F" H% i
}$ t9 |: V. ]$ J6 c& F8 y8 N# r
}
" A( p9 p$ |) T2 ? u
, c& |1 Q) p( t' P1 V' e0 l0 I
</script> # h, ~& i. p# a/ m* O0 E4 b7 k: Y
<textarea id="contents" cols="40" rows="5"></textarea>' ?7 r* X. |) h$ Z2 V3 j
<br />
6 ^$ v- B& Z; L4 ?& d) s
<input type="button" onClick="jsCopy();" value="复制" />, a0 C9 ^& [+ J1 {- U6 R3 t
</body>
' Z4 G& V+ h5 {4 y0 _
</html>
- ` d/ r! A3 ]6 S; e/ S

复制代码

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

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

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