点击按钮复制到剪贴板 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>' B, r) x1 U/ v/ J j/ l; `7 g# \, I
<html lang="en">
- {& \6 }# @- ~$ `5 @, K5 B" B9 w& B
<head>/ z: x1 ?; j4 b
<meta charset="UTF-8">4 x5 T1 ?+ f) R1 K8 C% D1 s
<meta name="viewport" content="width=device-width, initial-scale=1">
* O% ~1 E4 [4 ~' X7 p# x6 g
<title>Document</title>8 q7 o% g* ?. D/ m
</head>& J9 y1 v& w4 E& Q! e
<body>
, n P1 t' M8 d8 A5 c; _) m& p, v
<script data-cfhash='f9e31' type="text/javascript">
; C8 t3 a; n2 d; }+ W7 B) L
function jsCopy(){2 i& W5 s: K& y* P) F$ {3 l
var e=document.getElementById("copy-num");//对象是copy-num1
/ q9 U2 n, u1 T5 P" n: a6 R* o
e.select(); //选择对象* N1 A9 y' {3 a% u; C
document.execCommand("Copy"); //执行浏览器复制命令
( \, R- {3 h0 q
alert("复制成功");% S8 _/ d. G$ w7 E2 Q
}+ s* w/ W F: ?( ~+ |
/* <![CDATA[ */
; |9 l" w, l8 Q k, }% d: r+ u
!
. O" S1 S! J; U1 l" e q. D
function() {
* W' I3 G! H8 X7 N6 X
try {
! q: s3 C1 N* T1 j. v
var t = "currentScript" in document ? document.currentScript: function() {
- s: N2 o6 i& ~* f4 D: J$ I
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]% e& ^, m- K! m& E8 \8 O- G
} ();
: w3 [. o5 b* _$ _7 f, z2 k# `/ c
if (t && t.previousSibling) {3 n& q4 E6 s+ a0 f. }
var e, r, n, i, c = t.previousSibling,
* B" t3 b0 J9 n; M( s" z0 Z
a = c.getAttribute("data-cfemail");
' d" `' L- Z; a% A+ B3 t* f# B
if (a) {
0 Z: p3 i8 _9 R2 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,
2 g/ x. B/ o" ^6 r3 i/ n
e += String.fromCharCode(i);
3 c0 q# u5 q* [% x6 g% x
e = document.createTextNode(e),
# f* [( w4 s( N8 h% r
c.parentNode.replaceChild(e, c)$ t( Z# i# G: v; {3 q- w
}+ P% {" i6 i: Z! Z6 z
t.parentNode.removeChild(t);3 S) s/ A4 j/ p3 n( {! `9 Y% H4 l. O
}5 Z. g: v7 q5 J4 K; V. _- u
} catch(u) {}
$ {! i% M4 g7 c, T! b4 n; C
} (); t" l/ k* C) s# ?
/* ]]> */
' s' C {4 `) p
9 @( D. D7 ~9 T+ J+ Y
</script>$ N& n' a/ Q, [7 v
<div class="nav navbar-top-links navbar-right">- A. k9 j! Z# b3 @- H, l
<li>推广链接：</li>. ?4 z* [( T" V7 q/ `6 R
, ?2 Y" H/ R4 O. u, g! w
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>. q z$ K* R) {# m
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
8 y# I. J8 g2 d& h
( _/ q7 g* s( n/ N9 W4 S! t+ _
</div>6 s7 h9 v. x$ h
</body>) v5 ~2 i1 G; R& a
</html>
! X* N1 c% `& V3 Q u6 g

复制代码

案例二：

<html>
7 ?2 U) n% H3 F( {& `
<head>
f+ V, O, Y4 i/ `8 J% j
<meta charset="UTF-8"># h3 T( O! S0 q# q/ M
<meta name="viewport" content="width=device-width, initial-scale=1">
$ L* e) r- P5 l7 A0 E+ Y3 t
<title>Zero Clipboard Test</title>; @" m s# t+ H' |* g3 K+ w2 n
</script>
9 P* ^: \ I3 N% p4 m4 ]3 {/ p
</head>
% o+ |5 F' I2 F$ q: F
<body>
% w ^9 [7 c4 r; z& Z& l+ k. p
<script type="text/javascript"> 3 `. p( O `& p0 O6 A
function jsCopy(){ 8 K# B" d, n9 g
var e=document.getElementById("contents");//对象是contents
6 x2 n3 n6 g1 j8 y% h
e.select(); //选择对象 + y8 M3 j* J2 M) G& ?
tag=document.execCommand("Copy"); //执行浏览器复制命令7 Q! t. o: {" ^" p$ e0 Y4 \
if(tag){
2 i) b# R$ m( c0 }* B4 |$ J" I
alert('复制内容成功');
/ E" H9 H! W* }8 X/ |' o* X
}
5 I1 ]% U. y# D v( S; d$ G
}
& Y6 Q) A0 `4 c7 o
1 \! g- b3 K& v
</script> 8 R4 |# M" R& }# Q7 w
<textarea id="contents" cols="40" rows="5"></textarea>
' ^' G0 a* J( F& p
<br />
9 b( Q+ h8 n! E& D' |+ i
<input type="button" onClick="jsCopy();" value="复制" />
- ~# J1 O) B, }1 R7 ]% H
</body>
F5 h$ U/ w3 N/ i1 B$ s
</html>0 r# ~! Y2 c0 ?& {2 i% R) F

复制代码

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

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

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