点击按钮复制到剪贴板 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>( w+ v3 O: \- w
<html lang="en">& h9 i: y8 M; l2 D: T* o
<head>; W4 ^. x6 x+ ]% d# T9 h; a Q
<meta charset="UTF-8">* {* k1 q8 U* j6 e% @) F& }3 e+ Q# ^( E9 e
<meta name="viewport" content="width=device-width, initial-scale=1"># ~' T( ~/ M8 b
<title>Document</title>7 Q# o; U" _% x# R9 c. H3 a4 \9 F
</head>
+ v2 ]( I# V0 }* f" y
<body>3 a" C6 p+ |+ H8 k ^ ]
<script data-cfhash='f9e31' type="text/javascript">
" l( h& U& `% a) h- M. r: ]$ k" v
function jsCopy(){7 x7 m* h! n: _0 H a2 j7 D
var e=document.getElementById("copy-num");//对象是copy-num1
/ j' {6 r9 T1 o8 v) S7 o
e.select(); //选择对象
. l7 F; d9 u5 I1 C
document.execCommand("Copy"); //执行浏览器复制命令
8 C8 e+ ]# b; M# d8 ~" X
alert("复制成功");/ \. f9 x) [/ J' T/ ?* I4 w9 S, _
}5 x9 a( b, A" H2 W; y
/* <![CDATA[ */
" ^* u) Y) F) a4 [, F8 _4 M( r
!: B ]+ O# \; a/ Q/ \4 ?! U+ j
function() {
7 I6 l8 l( p) ]0 A u/ d5 H
try {
7 V& B" \' P3 D0 C
var t = "currentScript" in document ? document.currentScript: function() {
* P; l0 I4 @' }
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]6 C8 l0 X! A1 m3 B8 h9 f
} ();( X/ z5 M: [1 T# Y$ o( y L# |
if (t && t.previousSibling) {
: q ]; ^- S6 C. h$ s, m. ~
var e, r, n, i, c = t.previousSibling,0 n2 t& ~2 E. a
a = c.getAttribute("data-cfemail");* r. \9 U3 d% H/ Y1 G
if (a) { y: ^! g% W! Y% K+ |! x$ q
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
P! }# Y& H: t2 _% M$ ?8 |1 i+ d: U
e += String.fromCharCode(i);
# U5 {: z0 C, ?+ a' M
e = document.createTextNode(e),
, u3 }3 O2 Q# } F; \
c.parentNode.replaceChild(e, c)
$ L: c$ C! k4 c' d2 }
}* n) j$ B; o& p
t.parentNode.removeChild(t);, I* G; {( S+ X% j% ]9 L2 H
}
; ~! ~4 ~4 G0 B' W0 _
} catch(u) {}+ N. D6 {7 ?( D. Q! h3 Y# U7 {
} ()$ H$ w& Q3 ~1 ]7 s
/* ]]> */
1 D# U- q( a$ Z: n u6 _
# w" n% a W, K' t% O
</script>: ^% D, X) }8 w7 D1 c
<div class="nav navbar-top-links navbar-right">
3 Z, i, ?/ j) R$ F& T1 M3 T
<li>推广链接：</li>
. ?5 ?5 R5 V# ?: h4 j6 G4 `
( `( a3 j* w5 e& ?$ |+ i& Q: k& m
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>4 I8 v6 W$ j K. O
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>, e) Q3 d0 \+ _$ W
3 a& u# d$ F3 P! }+ c
</div>
! q. X: ^7 N) k$ s3 _
</body>
) t8 _7 P0 ^% y: q6 x' @
</html>7 @% g0 m% | J/ Z; z% E0 N2 l

复制代码

案例二：

<html>
- ~$ k9 h: l, Z: g& W) P
<head>8 k7 @ o( Q+ J5 B0 n9 s& o1 G/ z! h
<meta charset="UTF-8">: N" C% {$ q/ }! g9 U: g( q
<meta name="viewport" content="width=device-width, initial-scale=1">( o |! x# Y% ]! o( m+ U! q
<title>Zero Clipboard Test</title>$ q9 c& z- D. O5 M
</script>; ?2 n3 w/ g- p
</head>6 |) U( o! \4 h$ ~
<body>
7 m3 y6 [; d" z4 g' d1 ]7 \
<script type="text/javascript">
8 s: f1 Z* \1 w% ~
function jsCopy(){ " F4 n# @, X1 ^# i2 B% W
var e=document.getElementById("contents");//对象是contents / Y5 A, @0 ^ G: h8 l
e.select(); //选择对象 4 ]1 I: ]: X3 J* H! F
tag=document.execCommand("Copy"); //执行浏览器复制命令% g: D7 `: W4 ~2 Z+ F( J
if(tag){% n- K& l& y& U( E* x
alert('复制内容成功');
* N r8 H* Q9 K" t
}6 G4 E& y" ]( x
} 7 v6 V1 q$ R" ?. d. Y* G; D
$ [" l: A1 A/ b* R# r
</script> $ d4 f; b% \" C7 `4 T+ P% v
<textarea id="contents" cols="40" rows="5"></textarea>7 `) f [7 n8 p4 k+ G
<br />/ _" _+ ~# l2 B
<input type="button" onClick="jsCopy();" value="复制" />
2 A$ y% g; ^& N
</body>
- N. E" O4 c: k" n5 _8 `
</html>) H+ f$ `/ M2 t- w

复制代码

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

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

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