点击按钮复制到剪贴板 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) S+ @0 I7 n( `# h0 t
<html lang="en">
+ V3 W; f5 |4 j3 L
<head>
6 x8 }, P/ E( f
<meta charset="UTF-8">
0 @: i" e& X5 U0 M
<meta name="viewport" content="width=device-width, initial-scale=1">& E0 }; D \1 s7 R8 [. V8 C
<title>Document</title>, h# Z% ?4 R a6 C- w# Q$ b
</head>9 O9 | c$ u j& D8 y
<body>, y" Q; t! ]% g
<script data-cfhash='f9e31' type="text/javascript">& f7 Z) }# L1 X: }0 I
function jsCopy(){/ x A7 f9 M3 m+ z
var e=document.getElementById("copy-num");//对象是copy-num1; V/ X I, t- U
e.select(); //选择对象 R/ p+ P2 O3 B: H3 R7 v; W2 t1 C6 B8 z
document.execCommand("Copy"); //执行浏览器复制命令8 u/ n* V1 ?" T/ U
alert("复制成功");
( F9 f0 M/ C- h; s* W O' e
}$ E, c) Q( ?, y4 H5 \
/* <![CDATA[ */: a6 j" b; u+ S; k" J# a0 I
!
5 X" U5 A& Z2 Y8 o
function() {
; S/ Y1 _+ j4 H5 G
try {* B& W) U* ^$ {. A( g8 ]& c
var t = "currentScript" in document ? document.currentScript: function() {: n( Q* |. I! T+ q3 |
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]& M0 p* j6 G- b+ f4 V
} ();6 N* w0 x- m1 S6 C+ B
if (t && t.previousSibling) {
% x% M' M+ G' ^! z; m* j4 l; D
var e, r, n, i, c = t.previousSibling,3 K: n9 g1 @7 _6 C, o
a = c.getAttribute("data-cfemail");# B- c2 J/ y+ N. G
if (a) {
3 K4 ^+ R( w: V' { t
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
5 w; M! x. M5 D7 J5 B
e += String.fromCharCode(i);
* F7 y6 I( E: _, w" l# t
e = document.createTextNode(e),
8 \* N# ?3 W8 i9 C* |: Z
c.parentNode.replaceChild(e, c)
: a5 b# \. l* Z1 V' r- [( o% \9 U
}
/ X; t y# K6 A3 E
t.parentNode.removeChild(t);' z6 f6 J( Y0 P
}
7 H/ `: X* E% s# d
} catch(u) {}7 p* M! y% t/ Y
} ()) t2 w* L( q% n- y9 q7 D$ r3 q
/* ]]> */
1 k5 a- U" }" X# U: B' U
5 V# t5 \# l# n! t4 J. Y; U
</script>
3 W- O' r4 o: c: ?% [ e s5 e) E
<div class="nav navbar-top-links navbar-right">
6 o# [; o- { s# P0 [' o: L: u
<li>推广链接：</li>6 J H" t) S' ?0 a$ U' ` f6 f
4 k; g% V! I# W W; c
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>* W5 p* i7 G; L( Z; D
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>" @ @# F6 O, {8 S+ L ?' Y
- T' H. c' u4 O* `
</div>0 B; v6 N2 c4 I- x
</body>
- H- k( R: Y3 ~& B0 Y( c0 x5 f
</html>
5 D% g; v4 ^ h$ l( J8 B

复制代码

案例二：

<html>
$ N$ V0 n0 r K, u* }: Z
<head>) F" z! ] p7 h
<meta charset="UTF-8">
; O6 k# U3 B$ s& ~0 X n8 ^! ?
<meta name="viewport" content="width=device-width, initial-scale=1">! O, ]- N* d3 I. U
<title>Zero Clipboard Test</title>
6 }) c/ ]% A9 i0 o! _. T/ ]
</script>5 }* g1 O9 J0 b; c8 _& l
</head>
! U3 ^7 ?1 e# X& {5 ~8 y( l7 W
<body>1 E( G8 Q1 J. O% D# s0 z8 W4 s
<script type="text/javascript"> 9 G: B$ z9 r, w! |; O
function jsCopy(){ ! M# W) G% r( c( w
var e=document.getElementById("contents");//对象是contents * J% S$ [% W; B4 c: \1 l
e.select(); //选择对象 / Y; l' r: g; A( ? _5 ?- ^
tag=document.execCommand("Copy"); //执行浏览器复制命令
4 }2 X1 r# r( o# \: F. k, B) d
if(tag){
3 G- I; D0 l* u8 w2 N; f A$ E
alert('复制内容成功');& ] e$ n2 p+ n3 l! b
}
! u8 P: z+ V3 ^& X4 R' r
}
9 G5 O! }* j" w# j
% C; h4 _# \" d- i3 ^* w
</script>
5 J8 O. ~; [: E& F( q, B3 n
<textarea id="contents" cols="40" rows="5"></textarea>' Q( L$ V3 h; Z7 p' S# b7 N3 X" x
<br /># T9 x5 K. t- p, v" z) L7 `- O
<input type="button" onClick="jsCopy();" value="复制" />; [: \6 @4 V3 H7 V
</body>
* L3 U f9 V7 O4 L% p
</html>* e: T+ A1 T0 g, h4 I9 l2 y

复制代码

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

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

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