点击按钮复制到剪贴板 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>
4 ]8 C3 l& f' K, r. o9 ~1 A4 r b
<html lang="en">
# V8 [( Q4 |# N3 T" Q0 U2 s
<head>
3 @' ?0 R! T: r; k; l
<meta charset="UTF-8">9 T( v8 ?$ p& ~8 p0 }; o
<meta name="viewport" content="width=device-width, initial-scale=1">
/ q! v; w- q0 V- j5 N* Q$ ^. p
<title>Document</title>( ]$ r: g. S! R! r$ e
</head>
! R3 @, Q! l% a9 @; t) Y/ T% H/ P
<body>+ J, d f) ^2 ]7 ~$ s6 F# w6 W( W1 [
<script data-cfhash='f9e31' type="text/javascript">
1 S$ {$ k; ]/ r3 q- v- t7 j
function jsCopy(){# G* Q/ e& a9 t1 h
var e=document.getElementById("copy-num");//对象是copy-num1. Q2 S3 e; y- m+ { E8 |' p8 {
e.select(); //选择对象. ^5 K3 E/ H. z" Q* y( k9 B0 Q
document.execCommand("Copy"); //执行浏览器复制命令
1 ]1 f% J9 t/ _3 ?
alert("复制成功");
8 U) r9 \0 f1 ^. y+ k0 Q$ V0 i: N
}
3 F$ M0 J( m9 l: \, a* F
/* <![CDATA[ *// Y$ L0 f& W+ a- {* o: o
!
6 v! y+ Y- H/ I* D: I" t
function() {
) r5 T& _" _2 r" W2 c4 j
try {# c J( A8 T! k$ x- g1 O% a
var t = "currentScript" in document ? document.currentScript: function() {
* K: H; a) L5 s1 ^7 J" c
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]6 _. h8 I. A6 e& v) C9 T; B+ _
} ();; V& V4 m; r; h0 J B0 _# L
if (t && t.previousSibling) {% f- {& _8 N* L& @& Q6 t0 u
var e, r, n, i, c = t.previousSibling,! F" b" d# l* F$ d: F1 Q" h
a = c.getAttribute("data-cfemail");* }4 _2 F1 n- ]6 C% Q
if (a) {
7 s. v% O+ j& i7 p p$ b! V d
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
7 I6 b' x6 S- e# L. N
e += String.fromCharCode(i);
7 {2 g& C- K5 W5 |) S! G
e = document.createTextNode(e),
/ C# u8 U* |. N
c.parentNode.replaceChild(e, c)
' s/ U: R: P# B7 I4 Q/ d8 ]4 \
}6 |0 z4 _( ]" I% W% s2 o3 m- p) V
t.parentNode.removeChild(t);
+ H9 L7 O* Q O3 j' L3 a
}
& k$ P& u+ A& r) D0 C* R" j1 J
} catch(u) {}
! x+ D' ?7 Y1 m6 R: N# n
} ()0 u7 e+ S' B3 e! M
/* ]]> */* }: ^3 m" D" b9 Z
3 Z( S& C" c6 Q: y
</script>
2 Z/ p- }+ [3 N% j! P- g% r; E
<div class="nav navbar-top-links navbar-right">
0 Y7 J/ _! S9 g* b. ]
<li>推广链接：</li>
y9 C9 e% C, W# ]0 ?7 l5 F. k/ K
/ S; }+ O( b: \) u$ K8 l
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>
# H7 L' q- y5 Z
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
5 L/ E* d' F: ?8 N% E
, e9 U' Q# P/ |# I. c8 n
</div>8 a# x+ x. m. v6 E/ H
</body>- K o" v9 K% f0 f3 q2 p6 F
</html>4 o1 V1 O S) l% Z. |4 [

复制代码

案例二：

<html>
1 C8 @" N, U$ w4 ^! e" C- X/ V
<head>0 |( @ G/ \/ y2 r3 W
<meta charset="UTF-8">
" T4 I% c) t# w& z
<meta name="viewport" content="width=device-width, initial-scale=1">7 N( l3 o: [5 g A# l7 J5 |. [6 q
<title>Zero Clipboard Test</title>8 O) f- N) d; x0 H) {7 f' k! g+ U
</script>
+ W4 a$ P W2 e+ J/ W% e* c, F
</head>
* D, f5 [" a# N9 b7 F
<body>
- Q! d' f: ^) ?9 H. ]
<script type="text/javascript"> " @ S h/ O& a+ ^
function jsCopy(){
2 W0 X" s ~- [: X- y! a
var e=document.getElementById("contents");//对象是contents / \& B9 l$ i- \" Y% m
e.select(); //选择对象 ! `& x7 P) u7 t+ A
tag=document.execCommand("Copy"); //执行浏览器复制命令
$ Y( S2 d# b7 o% @1 J. \" V6 Z. F8 T
if(tag){
$ }+ a% {2 s: P* D
alert('复制内容成功');7 N+ B/ E" _4 w( B! \9 W
}. e g/ ? x3 l( S( I
} , ?6 {4 ^$ G, z& U0 {. W4 G: w* o
& c& n0 V( e1 ?3 q& [( W- Y
</script>
j7 g( N* |3 V* _! j5 ~
<textarea id="contents" cols="40" rows="5"></textarea>
) R9 P5 q' w9 y f
<br />
/ A& _- H9 M4 e4 w L f4 T( r
<input type="button" onClick="jsCopy();" value="复制" /> d h$ N0 O" R- L9 F
</body>
) E# \( C: M. }
</html>
3 U; Y+ y% b9 F3 f% u- v

复制代码

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

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

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