点击按钮复制到剪贴板 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>! Q3 z9 ~7 m% b
<html lang="en">
( `$ G! P5 t( j
<head>
- Z) l+ F9 S# v7 ~. j+ s" k# n
<meta charset="UTF-8">
5 H: u0 b6 ?/ q5 U2 w- E
<meta name="viewport" content="width=device-width, initial-scale=1">6 ^+ y( l' P5 y2 u" M
<title>Document</title>( @" n6 M) `9 m5 a
</head>- q# P9 S$ y( r
<body>; ~3 p( Y' a$ @7 R g* B
<script data-cfhash='f9e31' type="text/javascript">8 V; l% C H8 p
function jsCopy(){
" Q$ N0 |1 V5 h' A; @8 b. R
var e=document.getElementById("copy-num");//对象是copy-num12 e0 t& V6 f$ n5 X) D$ |
e.select(); //选择对象
& e! Z! ]( E7 V- Q9 H$ W
document.execCommand("Copy"); //执行浏览器复制命令
6 {9 h2 I3 ~1 W8 B$ S, f( u2 r
alert("复制成功");1 T; g# E6 I6 O+ D
}& t# \# o1 F0 y( {. V- \3 b
/* <![CDATA[ */
0 Z6 ?: K+ R& ^& V! f/ U
!
6 f e, Y& J- U: _' ^ `
function() {
0 g# r8 H9 \$ o5 H2 ]
try {2 r' X9 j& @8 l L9 h' \: M
var t = "currentScript" in document ? document.currentScript: function() {8 R0 `, Q U& { Q8 P) I3 G
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]
# {: K- p* d9 W8 X3 [
} ();" Y; m# Q- S' i; l" z8 b
if (t && t.previousSibling) {
+ b9 |( m4 H( t: s, o" s2 S! l
var e, r, n, i, c = t.previousSibling,& U; E2 P, r3 I7 ~6 K
a = c.getAttribute("data-cfemail");
i$ _3 R' v( i9 h. A9 k- H
if (a) {
. k; U5 @3 T/ @5 j1 R; K- p0 u
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r, H; ~% m; Q5 K- K* R; |
e += String.fromCharCode(i);
; s3 E6 E" X2 P: R) Q! u$ ?/ y5 j
e = document.createTextNode(e),9 x! X% q9 c0 n: C+ @- V& |4 z2 _
c.parentNode.replaceChild(e, c)
7 h& k! L( E8 ]( w7 F3 _5 j
}" H! z. c% w$ ?( M) |
t.parentNode.removeChild(t);/ ?/ f# Q4 r3 A
}
* s5 @6 x8 x; b, B! c- y) d7 I
} catch(u) {}
+ a& T+ D, Z5 B( x) A1 l; N
} ()
N! K% o& z( j I
/* ]]> */
; F3 s1 ?- J3 L: D4 D! s( ]
& n' Z, F% Y, h/ A6 X& Z: H
</script>) M0 ~9 V; v6 U
<div class="nav navbar-top-links navbar-right">
) ^7 d6 \6 K+ S$ b
<li>推广链接：</li>& G& s+ \3 U8 i% W% l
8 J, `. v) @# F2 c( s
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>
* U3 j& @8 R7 e. D R: z
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>3 \. b8 R8 d+ M3 W3 \' R# j5 N
8 ]# }* ~1 @0 X* }. W
</div>8 f6 M% m" K* i3 h8 C1 C. G/ ?
</body>' |3 D- A+ s" R1 S7 _
</html>! |9 o! b* W) w9 d$ ]

复制代码

案例二：

<html>
5 Z' Z- |1 ]9 z7 L4 ], X
<head>
% D" C4 r% C1 g( m p3 W
<meta charset="UTF-8">' P. w. Y- N" O1 ^
<meta name="viewport" content="width=device-width, initial-scale=1">0 S% w0 X0 u! q0 ~
<title>Zero Clipboard Test</title>
( c+ Q4 W6 J; Q' e
</script>0 `1 ]' U! J' _
</head>. J1 F! S( h% p7 K! J7 R
<body>
# z+ t. N( m. h6 D4 f
<script type="text/javascript">
5 W- B q" g, Q
function jsCopy(){
7 f) W$ \, k: j! D
var e=document.getElementById("contents");//对象是contents # l1 t7 c* Z3 M8 ^, s8 e0 G
e.select(); //选择对象
+ i4 O6 r0 o) W/ J- H" b
tag=document.execCommand("Copy"); //执行浏览器复制命令
/ P7 [: N# F( j
if(tag){( z& S, g! ^2 [6 }/ x7 a- Q1 r
alert('复制内容成功');
% {4 Q- T* S; `' q: T& `
}! d/ v/ `& k |- D; t9 J' S8 C
}
$ c: t* P+ g2 Z; |, X4 L3 p: t
& f" a6 @* f/ U1 S8 f0 _9 k
</script> 1 [; u7 X& ]' R% X. J5 H3 R
<textarea id="contents" cols="40" rows="5"></textarea>6 ^5 R2 v# R, P/ i, W/ `" n# z- _
<br />+ P0 \2 H7 ^# [$ K3 N
<input type="button" onClick="jsCopy();" value="复制" />5 m/ K# u: k) J. Z# Q! {) T# W/ ?
</body>4 j4 {# f7 A& P
</html>; l6 L. Y1 e+ [! [8 x2 p! | c u

复制代码

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

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

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