点击按钮复制到剪贴板 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>. v+ {+ _, f/ \5 L7 J0 H
<html lang="en">
* n( m6 w' S8 }
<head>4 j; j! u1 i! U
<meta charset="UTF-8">
& w# p5 \) X: u7 @
<meta name="viewport" content="width=device-width, initial-scale=1">. R3 F6 X& [; y5 C O) L1 y
<title>Document</title>
6 ^* u0 h7 W" t& X7 |$ i: N
</head>7 w0 D1 d* V/ C, R& \8 o
<body>% ^0 ]( T1 j9 [7 {: z, i- U
<script data-cfhash='f9e31' type="text/javascript">+ E4 u. _( {% u8 R5 S; c
function jsCopy(){3 U W. ]6 y9 H: W. [$ b3 r
var e=document.getElementById("copy-num");//对象是copy-num19 z @7 p+ F {: r$ g( m; N
e.select(); //选择对象
- {/ I$ X5 c7 X8 a
document.execCommand("Copy"); //执行浏览器复制命令5 I9 i; \$ j1 p" Y$ R0 ]
alert("复制成功");
/ O8 i& n' | _
}# [) A# ^: b- V1 [. c
/* <![CDATA[ */ a. P- f- M4 P8 U- [1 m
!
$ S/ M0 X: ]$ r" q" w8 F( t$ @
function() {+ V; W+ a* Y% ~- X$ l
try {
3 W- [5 j5 D* Y. F5 T- O$ {$ M
var t = "currentScript" in document ? document.currentScript: function() {
5 \8 y1 @4 C4 U
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]
( y+ O: c% D( k1 g- ]4 F
} ();
( W6 M5 D& [5 `; p( s$ Z4 P% b
if (t && t.previousSibling) {
$ O* \! s5 H3 ^( ?
var e, r, n, i, c = t.previousSibling,5 ?2 l2 @' _7 I$ A4 j
a = c.getAttribute("data-cfemail");
: \; e# W* y" }) X: r0 ]
if (a) {% i9 N) H: H( F7 G
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
$ g+ D7 L& y7 Z2 y7 X7 P) S9 C
e += String.fromCharCode(i);
4 {0 Y* [* Q# b4 C
e = document.createTextNode(e),
) s* C: e& I* C( N: }
c.parentNode.replaceChild(e, c). U! W2 X2 \0 J' X+ e4 `% G
}. J! C" H7 o: ~
t.parentNode.removeChild(t);) O$ n1 g3 O6 G1 B* D: x
}0 h$ n! `6 h3 m( r$ R% ?; G
} catch(u) {}
) r4 q+ H$ C* D1 _) Q& {$ g
} ()
% B5 W5 K$ T1 z e
/* ]]> */
$ n% x$ q* H% w
. P: Q$ m: j% ?: E! _
</script>
% {0 h! k9 b6 C
<div class="nav navbar-top-links navbar-right">
8 O5 L D: g" C+ z8 S' z/ D I
<li>推广链接：</li># P( [9 N' L3 }5 g
}! B, `6 t- [; {2 j. I" |
<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 f! v; W' D0 l* d" K) u2 N5 q& Z
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
. G) F5 A/ s6 V, H
k9 u/ m. T$ t" K; d5 u# `
</div>
; [. [+ M8 a' a3 W4 u
</body>8 E. L B0 ^3 N& V% c$ E
</html>' m! G1 A6 n2 O

复制代码

案例二：

<html>
+ j2 m' O2 ?4 M2 g, a5 W3 [* g
<head>! a! p! H" `1 A0 e7 c" Q, n- U
<meta charset="UTF-8">( K) g0 g; ^1 D, D) ^! v
<meta name="viewport" content="width=device-width, initial-scale=1">
( C' _% a! L6 |7 }8 i
<title>Zero Clipboard Test</title>
) ^8 w& O% U/ [9 U, q' n2 r/ b4 g+ l
</script>
, c" e! X' m+ ~& C0 l
</head>1 y) [2 S! w+ N: a8 s
<body>9 z# X& H! ]! C& U2 ]0 @* A
<script type="text/javascript">
5 n. E8 q8 O9 i5 @& I
function jsCopy(){ # A7 g7 _' \; e4 J+ e1 ~4 ~
var e=document.getElementById("contents");//对象是contents
8 v9 v) _1 \* \/ {9 C
e.select(); //选择对象 + O7 N2 I' `9 ]7 L+ u" e, W5 m
tag=document.execCommand("Copy"); //执行浏览器复制命令# S! Q" d" V% I* I( k8 R
if(tag){
0 P* H+ i4 k% m6 r" A
alert('复制内容成功');
: E4 m }( P4 ^
}
8 @7 F1 N3 {# c, }& L
}
) r% h& ]) B# W1 S
1 {; D+ u% a! q8 x# h* T1 t" Q
</script> # o7 T* j$ v8 q- v
<textarea id="contents" cols="40" rows="5"></textarea>
$ Y' P8 Q+ T! o: R8 O* q. T
<br />5 X7 a# C9 l* E. C) }7 A- {
<input type="button" onClick="jsCopy();" value="复制" />1 e5 A, h7 b% o* G/ P
</body>& N; F0 p. L* q$ G, C6 [
</html>
3 T" h( z" |/ S- D: C9 ]2 y

复制代码

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

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

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