点击按钮复制到剪贴板 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>
) _' x; H" ?) h0 K6 R V, l
<html lang="en">
; G) v& d' a; E, i6 s$ H5 i- m1 N
<head>
9 |9 u, S; V/ g; q9 F2 W
<meta charset="UTF-8">4 H! ?2 z; G/ d' {/ u* |5 c
<meta name="viewport" content="width=device-width, initial-scale=1">
( S1 v j2 ?( M: \ R
<title>Document</title>8 o' r0 a5 V9 A: M& ~
</head>
1 \. X3 Q( ?3 F' @. M
<body>
S( N# _2 {+ |
<script data-cfhash='f9e31' type="text/javascript">
! i$ }; Z8 s# c) t$ R: t
function jsCopy(){$ q& O7 }/ B5 L( m$ H- K
var e=document.getElementById("copy-num");//对象是copy-num1- z- I# H+ p6 y7 ?; {
e.select(); //选择对象
7 ^* ]4 o, ]3 z5 ]4 h+ J. z5 K
document.execCommand("Copy"); //执行浏览器复制命令
# Z S6 w+ h0 G; }' n+ N
alert("复制成功");
$ ~- i! {2 Q. P3 P3 R
}, e1 T; E" z: ] P+ p3 h
/* <![CDATA[ */. M3 A4 h% K, X6 [6 e
!
" w0 ?2 k: H% k$ N$ Y
function() {4 m, Z" N$ d- _+ \7 x% c
try {. X! }2 y/ z+ i: R; d- Z G& @
var t = "currentScript" in document ? document.currentScript: function() {
$ d5 W0 ?! [& H) S" Z
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]: J8 z6 S/ M2 g: F! \
} ();4 y8 u: A5 J i4 ^) s0 p$ X2 l* j; X
if (t && t.previousSibling) {! l' d3 ^5 M ?1 `- `
var e, r, n, i, c = t.previousSibling,8 S1 W. E: r( q1 H. M) u6 U
a = c.getAttribute("data-cfemail");* f0 |7 [. f% s! X, e6 ?
if (a) {# c# |% U2 i& b4 s; y
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,( {& m9 L( S; b3 Y. i4 P
e += String.fromCharCode(i);
1 q9 o. D1 f7 X4 V* X/ z
e = document.createTextNode(e),
0 I$ `; F7 h- K1 P+ M7 ?3 ?
c.parentNode.replaceChild(e, c)
& n+ T+ ^2 u& _7 E" i q+ P
}
( w( L P3 |2 K- b9 t o+ Z
t.parentNode.removeChild(t);
/ _+ V# |9 R& Y" e/ o7 `' f
}: x- D, n! a0 ?3 J8 d6 A) z
} catch(u) {}4 Q& F6 E' D3 F# U3 @
} ()6 Q Z: T5 e/ }; g
/* ]]> */0 j# \+ O; v7 e) w8 x
9 k& G: }6 L" q' P# a: p1 E2 @
</script>$ j" O7 Z4 ?1 P3 `9 |, \: P- }
<div class="nav navbar-top-links navbar-right">
8 `3 v- ^* _; ^# j+ i9 `
<li>推广链接：</li>
& P( D6 G- T9 \7 A4 X
! ^( D. i. v6 Y1 v" V: K
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>
+ m. X4 Q4 w9 l: F1 L+ Y" i
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
& o; T6 }5 [( V0 u5 C6 t
H3 y; `' s+ a; s7 L) m* j
</div>
0 t7 S+ ]' F' H) F( C
</body>4 ^$ S+ R' d; j. y
</html># [* D& a% [0 W

复制代码

案例二：

<html># v4 R7 i3 O, y5 e) _. z, Z; B* ^+ k
<head>
9 Y0 J0 j1 b5 Q3 K
<meta charset="UTF-8">
6 ?2 Q! K! J# ~0 g; d: r0 V
<meta name="viewport" content="width=device-width, initial-scale=1">& L6 `6 L! A! [/ j* l% s5 t
<title>Zero Clipboard Test</title>) T v% Y9 ]( b- F& a0 h9 _% i
</script>8 ~! Y! W* N! f: b' n5 }
</head>
: h6 K$ W6 E3 e
<body>: L% Z( ]2 R" l
<script type="text/javascript"> 4 z2 Z g: w8 I ~; C
function jsCopy(){ , L% {; L& d. [6 }, r8 C
var e=document.getElementById("contents");//对象是contents
5 g) T; z" A% a' s) v% m6 T
e.select(); //选择对象 , u6 n. D! |/ X* |/ C! ^
tag=document.execCommand("Copy"); //执行浏览器复制命令
" F& y+ ~( a' i/ F9 _& S' x
if(tag){ N3 t, U8 M5 Y
alert('复制内容成功');
2 w+ X) R. B9 p! i4 [- y2 m
}+ o3 ]9 f8 b& a' r
}
6 @5 T$ g' h( p3 X! r7 f( Z7 R5 e
: n9 l3 C; Q' t& X) k
</script>
! K7 B' e- v9 F% i3 p2 u
<textarea id="contents" cols="40" rows="5"></textarea>9 {) _2 ~+ C" j- H7 O, D
<br /> A+ ~/ | h& ^, }) t* g4 H* n7 ^
<input type="button" onClick="jsCopy();" value="复制" />! B7 _9 y3 E% U5 s- ]
</body>
- H+ L# m& @! k* p& N4 t5 B
</html>
; {8 R# E" N1 ]6 x

复制代码

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

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

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

浏览过的版块