点击按钮复制到剪贴板 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>
6 v1 X% O) f3 |9 p* S. G8 O. ^
<html lang="en">/ K" s: ~1 d0 j. b) h4 u
<head>+ ` ]/ y6 ]. ^; S2 }) |
<meta charset="UTF-8"> V" g$ t* a2 a( Y# u' q
<meta name="viewport" content="width=device-width, initial-scale=1">* v) @$ W; }' t0 \
<title>Document</title>$ x2 p5 Z3 \* h% \5 o U
</head>
# L5 G. I* e9 G" ?2 b8 A, [) E% ~
<body>; d( L e* ^3 |7 Q* k+ @4 r3 O
<script data-cfhash='f9e31' type="text/javascript">
) N- P* p7 V5 H' ^' u
function jsCopy(){' Y7 M. g' f! `1 Y }
var e=document.getElementById("copy-num");//对象是copy-num1! `. t. J+ T) I
e.select(); //选择对象
) [! v' Q. J- t& F2 {+ t3 ]
document.execCommand("Copy"); //执行浏览器复制命令
1 i$ w/ a6 a- ^+ B7 w* F2 G0 m
alert("复制成功");1 N! e* j5 ` n3 F. Y2 B+ _, ]' h, u
}( F/ R2 K0 f/ C! a
/* <![CDATA[ */
% @/ Q# ~: `# Y. a* ]6 {
!
+ x8 p* Z1 N' p& ?
function() {
) w9 @( J; V- k0 r6 J5 S4 D
try {- c2 D8 m; i8 p3 @, D
var t = "currentScript" in document ? document.currentScript: function() {/ j& k) b- _$ Y9 W9 d
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]2 G8 X! a) F1 c0 X y% Q0 H
} ();
5 B, M, F6 T, A# s+ Q$ T; O
if (t && t.previousSibling) {. N, B3 M9 j8 {0 L9 N
var e, r, n, i, c = t.previousSibling,, h0 N; e- m f+ L, V/ H
a = c.getAttribute("data-cfemail");# C) r+ h: e+ d0 U; y1 s: X
if (a) {8 n5 M% j1 T S I
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
! N z3 E- U8 W3 p% Q+ D; J' A6 j
e += String.fromCharCode(i);
/ [" q/ e/ d+ N% c- y7 n$ \ @' w
e = document.createTextNode(e),
1 V; Y" C' F8 Q+ o1 X/ f4 p* N; y9 P
c.parentNode.replaceChild(e, c): x6 E" e6 y8 G; O4 ~* x
}9 X+ D$ o3 q+ n' m' Z
t.parentNode.removeChild(t);
* ?. z, |* L4 M' a/ A' N
}
7 x" A- O# V4 M7 ~+ M4 b3 D0 i; n
} catch(u) {}4 J$ h2 E8 z$ u! R7 q
} ()9 d/ A1 G i7 @( X& ^. M0 {1 i
/* ]]> */
r* ?" S7 K4 \) a+ D
; `4 A. y. P4 F1 j) W
</script>
1 c- E: X( f2 w/ {/ [
<div class="nav navbar-top-links navbar-right">. D. R; `" q w' y6 [; D: g
<li>推广链接：</li>
U, N# {1 S0 {
7 p# m0 _/ S' 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>
: v @' J/ g5 W2 a: t/ h4 \
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li> m7 u1 @# O6 X! B/ R
2 w+ D. V" J; C- O2 ^8 y4 N
</div>
# @; H! r) V3 I5 I
</body>
! Z Y, ?3 A) `- u9 @9 m+ g: X
</html>
5 Y/ G3 \+ `5 b9 f" Y3 {% g

复制代码

案例二：

<html>
- E# k0 \% D! I3 ^
<head>
, E) U% U, q3 D0 N4 {- s6 k
<meta charset="UTF-8"> i4 Q) T# r5 F( F& g* N y; l
<meta name="viewport" content="width=device-width, initial-scale=1">2 X3 ?& u1 n& m$ E {, t! ?
<title>Zero Clipboard Test</title>
- Q4 e9 [2 \( j# ^' H1 s* [8 J/ g/ ~
</script># ^3 Y$ E- Y+ \3 g
</head>
" B- [ S/ N( v" d
<body>
3 b( u- v7 m- y+ H0 Q
<script type="text/javascript">
% E9 M4 X, x( l/ u! M2 v. S
function jsCopy(){ " p% g1 Z9 g! J: s" e) M0 J+ \# E/ G
var e=document.getElementById("contents");//对象是contents 9 j# l" M) A6 q; e9 V( ? x
e.select(); //选择对象 - r' }- _& i& `% P! N- P
tag=document.execCommand("Copy"); //执行浏览器复制命令
$ ^" ? a4 E$ g
if(tag){# Z" y2 \* ^, k
alert('复制内容成功');. [$ S% x/ m9 ^+ s6 v; a
}
N0 i0 U4 a' ?$ d4 z+ B) U7 Q! {
} 5 i. {/ w7 ?" `5 w& `
8 R9 U9 g1 V4 U! m5 \% Z j# ~
</script>
4 X1 H. t7 k4 U
<textarea id="contents" cols="40" rows="5"></textarea>7 q1 w& L! \1 V' }4 \
<br />' V3 q6 f3 k0 H1 e$ U }2 E
<input type="button" onClick="jsCopy();" value="复制" />
+ l/ W2 R) Y7 \" E$ g/ [
</body>
( G$ P; x1 ?4 ~, u+ ?, x5 r
</html>
2 h D4 m$ c7 u) M$ K/ y: n- U

复制代码

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

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

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