点击按钮复制到剪贴板 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>
<html lang="en">9 J M9 q/ R4 {) L
<head>
8 N& ?( U2 \) T. R
<meta charset="UTF-8">
# e; h/ _5 p- a7 H
<meta name="viewport" content="width=device-width, initial-scale=1">5 X6 L0 P9 E8 Y/ Q/ r3 _: j8 X
<title>Document</title>
- D- I( z0 i% s% d5 k2 S$ ^7 a
</head>
5 a9 G% j/ u- ~* b: v$ C
<body>: y M# W$ o& V- o
<script data-cfhash='f9e31' type="text/javascript">
0 Y7 e8 c8 T* ?! Z, c8 j/ h& t
function jsCopy(){
9 J8 R2 H- b; g3 \
var e=document.getElementById("copy-num");//对象是copy-num1
6 c7 Y0 J# t# P# l8 S6 H
e.select(); //选择对象
; f, K( R* Z+ J& d
document.execCommand("Copy"); //执行浏览器复制命令
- i: A4 k) i) V$ I/ ?/ R/ }
alert("复制成功");
% U8 [- P6 V5 \# r/ z! A
}
# N: D$ X, d: i7 G9 ^) ^
/* <![CDATA[ */
2 s, q8 V& x- \* J' b4 j
!
3 L2 ?6 |+ F, f
function() {- G9 ?4 i+ h1 _% H, z* J# t
try {3 S* R% L( L9 W: w# w* t
var t = "currentScript" in document ? document.currentScript: function() {
, V6 ?% w# z O1 P, G5 e$ _
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]
0 A5 F; E8 [7 g% C, p
} ();
' V8 b5 v" n3 |* I S' h4 ~
if (t && t.previousSibling) {
1 M! o, g( ?' H+ Y3 O; L8 n" w. T- R
var e, r, n, i, c = t.previousSibling,% \, D7 ^ B: `
a = c.getAttribute("data-cfemail");
* ~+ H# N4 D( h
if (a) {
7 y" B6 d/ T/ H+ H- q$ m# I* p) v
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,% Z1 u0 M. Q0 ]2 j
e += String.fromCharCode(i);
. v! i7 q$ A, \& G! _1 r- u
e = document.createTextNode(e),
3 e/ _- _' ~" S+ A# t3 s* ~
c.parentNode.replaceChild(e, c)
! E& d5 W; A0 k: z& O- [
}
! ~/ l0 q1 X6 m3 x1 ]# h
t.parentNode.removeChild(t);8 t: j3 A0 p0 S; x- e, {
}
5 I1 S }4 ]$ d
} catch(u) {}4 J4 O8 ^) ^9 E/ u5 N! l
} ()3 Y" y. n% _8 ]
/* ]]> */" W0 | N+ ?8 b; b7 k* J- c
7 @# m- p m7 Z! ]( |8 Z
</script>
# o$ v" P+ O9 a R; Z4 N
<div class="nav navbar-top-links navbar-right">
4 w+ B6 o4 a1 t2 v! q9 m7 N& ?
<li>推广链接：</li>6 g6 ~+ g9 O* |/ B; i0 i
l0 e8 Z, s: ?! Y9 n# p4 C
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>" E) z% }. {6 k# \ j
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
8 p7 A* G* G+ Z: z6 j. H! B3 _
5 z9 ?+ f: _2 H# v
</div>8 o& V: ?, M, |# k
</body>6 s1 g" H/ _1 Z) }" _% e" L
</html>
( u' W" U- z2 E7 C" x

复制代码

案例二：

<html>+ m5 ^. D2 Q9 r; }* `: ~
<head>
. r$ Q1 @; n4 B+ K# ?( E8 \' }
<meta charset="UTF-8">6 K; O, t3 U1 B
<meta name="viewport" content="width=device-width, initial-scale=1">
) R; Z) o5 K2 N+ `5 V3 R n
<title>Zero Clipboard Test</title>
3 a& i& q5 x. V1 N! r+ l
</script>% X, G. f- q* K0 T
</head>
" W5 l8 K& u) ^+ T
<body>3 e; P, R" s1 \2 Q
<script type="text/javascript">
% ~! @6 j6 w4 `/ w! ]( V; @
function jsCopy(){
6 H% z& A$ i2 V, r" J0 K [) R7 y$ J
var e=document.getElementById("contents");//对象是contents # O6 L# O; B! H+ d$ B8 e
e.select(); //选择对象 ; i0 V3 T$ `0 R- Y; B& `& F$ ?
tag=document.execCommand("Copy"); //执行浏览器复制命令4 z% m' H0 w" [5 e( C
if(tag){
+ E- X/ I ?5 A
alert('复制内容成功');/ T6 ~; x8 z% M! G5 I" M& I
}
' J" L% {# F, o- G
} ! M+ N6 I. t% C$ Z N
J! u' P# o! ?
</script> 1 I- @" h7 q2 m$ w: }& w
<textarea id="contents" cols="40" rows="5"></textarea>
9 ^9 ]* K- |; c; D7 d! }; n
<br />" i% H: T4 [6 Y |
<input type="button" onClick="jsCopy();" value="复制" />
. y% N5 V3 O7 V* O' x, Q
</body>( \. l0 _8 }. v4 @( z. }6 k5 [0 U
</html>
0 A/ N. V4 M8 W+ L1 S

复制代码

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

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

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