点击按钮复制到剪贴板 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>
5 n9 }0 S' |" h9 X7 `& d
<html lang="en">8 \; R% ]* A$ t' p
<head>/ D: l$ d# O% y" J, c
<meta charset="UTF-8">
4 `% s2 \+ }" E9 H; m0 b
<meta name="viewport" content="width=device-width, initial-scale=1">
R1 R) S7 ~7 u* D% o- H9 K2 ]
<title>Document</title>3 L9 O0 ?# V, q3 e
</head>
- ^, e* Q c2 e% s
<body>
. a) l3 D9 I9 p8 a
<script data-cfhash='f9e31' type="text/javascript">0 p" h0 w& t, i: H0 Z* B
function jsCopy(){
( B( s/ s9 p; ^( f' j6 X
var e=document.getElementById("copy-num");//对象是copy-num1
; `' r9 Q# ~' t# a5 ?
e.select(); //选择对象
9 r) J( M, k: p) F
document.execCommand("Copy"); //执行浏览器复制命令
y z6 r6 _4 s
alert("复制成功");
! ~1 G, M: N; B' p% N! f
}
. s* [- O. m% a; f, W& I/ y, Y
/* <![CDATA[ */" _3 p# E6 p* j
!
% J: @! L5 f( d) O5 C
function() {
* V1 Y3 X+ Q+ @. l+ p
try {
2 d" I @+ w: `* o
var t = "currentScript" in document ? document.currentScript: function() {3 |% L1 r) i0 F/ A, f
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]4 K9 r% E; s8 p& h
} ();
1 Q) d! U# h" H+ B X
if (t && t.previousSibling) {% k2 {1 o" x- n% s+ x( V
var e, r, n, i, c = t.previousSibling,! s/ S* x0 Y% r* v; a+ }: l
a = c.getAttribute("data-cfemail");! s$ k+ N0 n5 s0 d e
if (a) {! q9 r8 X) T' c" H( D B5 c
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,& D6 z ?. M/ K* T5 K* s0 u! h
e += String.fromCharCode(i);
! q; S& @" ~8 T% i% x
e = document.createTextNode(e),3 g. X: Y8 G; I* [7 r2 H$ _2 @( ]/ a
c.parentNode.replaceChild(e, c)2 I0 o, F; i2 B; Q
}" ?% R: ]5 i* a i/ F) b
t.parentNode.removeChild(t);1 h3 _' [( f; g- D2 D; Q
}
. \% K* _; D; ?
} catch(u) {}
' L! S( u- k @ u2 f) c9 s
} ()- f. s# e- x8 }# s9 z- p4 Q& t
/* ]]> */
/ X7 B* [% v+ t! e
! Q! w: e4 K, N. R$ S0 t
</script>
9 j# X% ^3 J3 \) f$ _( u: I2 g
<div class="nav navbar-top-links navbar-right"> ]* ?5 q5 ^* [& r: k3 H
<li>推广链接：</li>% T1 P6 b+ X% ^! f0 Z Z) f3 r, M
& P" F# d; L' W$ W8 e2 T% y- I9 T
<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 x" x b( I) z1 C% A; S% L P- u
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>$ i) M. J4 ~! G, |/ L# N
$ w3 {' Z7 S2 r, @5 e" m; \, e- i
</div>- R; o' K. @! q
</body>
2 J1 x% U) {: r. v4 g) u6 ?
</html>! D0 _1 ^6 t7 t1 e9 E9 v

复制代码

案例二：

<html>) n8 O) ~; \* C4 E! J
<head>+ H8 N) K8 M( R5 V2 r9 r7 z
<meta charset="UTF-8">
2 n0 P J0 f; n D2 A8 B8 t
<meta name="viewport" content="width=device-width, initial-scale=1">4 D8 h2 H b0 H- {
<title>Zero Clipboard Test</title>
2 u8 h5 \& J" a4 S
</script>3 v5 M! ]( ]' ^, g4 n
</head>
, e8 ]; W5 K( }8 U" e
<body>
. T X. |6 j4 @9 m
<script type="text/javascript"> ! k: N" \$ J, m% A0 i
function jsCopy(){ " A4 a) X/ x* A* Y5 X; z
var e=document.getElementById("contents");//对象是contents - G& V) U3 c$ Y5 O2 h$ Y! b
e.select(); //选择对象
( N3 {4 a* Y+ _) E4 E. Y, S
tag=document.execCommand("Copy"); //执行浏览器复制命令: h( s- \0 K& L* |$ M" {% P7 H* J
if(tag){
: t$ }1 P" A/ f _, e- ]. e
alert('复制内容成功');
$ r6 W3 j2 g' O5 G7 Q* C
}
+ q/ D' ?% |6 A0 U
}
7 r$ W. k5 A/ s5 \7 {8 ?
6 B: R/ k/ g+ L4 w
</script>
0 L" v& D1 r6 ?% b2 D& X, l$ U
<textarea id="contents" cols="40" rows="5"></textarea>3 T0 a6 o- ]9 ]! m8 p7 K
<br />; u- x: [6 x* b6 E' v! ~9 [5 j; h- \9 q$ B
<input type="button" onClick="jsCopy();" value="复制" />) l! K5 o0 ~" V+ ?* @' l; N. O* u$ C
</body>
' ]# y3 P4 l/ u
</html>
- c- d. X0 x& u6 n7 w s! x

复制代码

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

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

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