点击按钮复制到剪贴板 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>
4 _, P# D( p# @+ U- a4 l
<html lang="en">
) {# J( s' W! t, Q# x- W1 J+ a
<head>" Y( b- f" ]4 C m- ?7 d
<meta charset="UTF-8">% U, z$ y" ^6 O9 ]0 D" M6 \" u
<meta name="viewport" content="width=device-width, initial-scale=1">
5 I' ~+ u0 b1 d1 y
<title>Document</title>
2 `6 N* g# e Y8 ^8 }7 \0 a' O
</head>* p& b( ?2 }/ \9 P2 E
<body>/ H1 V" j& O3 {, \
<script data-cfhash='f9e31' type="text/javascript">
+ L) }3 o6 A3 i( m
function jsCopy(){
0 b$ u1 w: S4 D; Z6 t
var e=document.getElementById("copy-num");//对象是copy-num11 x. K, o/ e4 R* W1 d3 {
e.select(); //选择对象$ r7 u4 l- j4 b% |
document.execCommand("Copy"); //执行浏览器复制命令
) S; A! s. U4 c
alert("复制成功");) r- L; j0 [5 O- ]$ s
}: |! s; U% i$ t% z9 O
/* <![CDATA[ */: f$ O* i3 b; _4 b0 A( k5 j) N
!7 v6 W8 N8 B( J$ i! `" Q% l( M) I% ]
function() {
' C1 l' C, U2 k0 J
try {9 T d; c2 U) w
var t = "currentScript" in document ? document.currentScript: function() {
7 o4 a& c6 e, w g0 u( x
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]
8 ]$ R6 ?9 w4 N+ U/ B* u
} ();
& p5 p# r8 F. s0 V/ |4 i" A
if (t && t.previousSibling) {! Z4 i& O/ b; @! z. b
var e, r, n, i, c = t.previousSibling,
% ?, K* P4 u9 o0 ?. }
a = c.getAttribute("data-cfemail");$ s4 _* C; K; k) |8 Z1 h6 [
if (a) {
- a( s6 S& U7 u5 \' Z
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
9 P& u# `/ a1 O9 e
e += String.fromCharCode(i);% G. G6 ?8 A# t3 d" h, v$ @
e = document.createTextNode(e),# _! }, n$ m1 \5 a! j+ T, {# \
c.parentNode.replaceChild(e, c)0 _. L$ Z" y, R) ~! ?- L7 d
}) A3 A( c( s: M4 L7 k# o
t.parentNode.removeChild(t);: E8 M; R5 R/ M
}
, e7 S; f( \, w
} catch(u) {}1 ?* o/ D. Q# \1 Q3 z
} ()( T' r2 q, A: T/ x4 O% S: J) O
/* ]]> */0 G$ N, T; U3 O" |1 E% X1 I
' [- B. a7 u. N. G" m
</script># R9 V% U' o. P+ n+ K+ Q( j8 _% f( i) J* A
<div class="nav navbar-top-links navbar-right">; q2 O2 m+ F' S; N& L
<li>推广链接：</li> O) z5 v; K& k6 G B: T. c
& l, L' e# ?% E% k! v; F' P& U
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>/ t e6 D2 c: h9 K* h H& J" o
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
3 [8 H! N3 ?# s/ z
+ o$ C. M" g; e" I: r
</div>
0 j; m$ g3 n: G1 m6 r
</body>
; F$ L/ O! w( Y/ t( l/ G3 O+ Q. V
</html>- C( s o) Z* s3 a

复制代码

案例二：

<html>
( \& c: F/ `/ V* o1 t. I
<head>* Q+ p' X* Q! x W& F! R6 ~3 l Z4 f7 i
<meta charset="UTF-8"> [- F3 z8 r) _- Q) J8 S# `+ P: V
<meta name="viewport" content="width=device-width, initial-scale=1">
* c& \% M+ {. u
<title>Zero Clipboard Test</title>/ _0 T0 O. S3 L* v2 ?% O" h8 R
</script>2 ^. T( |' q0 y4 |6 G5 m" \
</head>
C+ a7 j5 j0 V" U, [) @/ _
<body>
, f8 }5 I( @2 e$ B* M1 ]# A7 e3 K
<script type="text/javascript"> ) o" i8 A( U9 O* ~6 c0 u: g9 m( y
function jsCopy(){
4 o- m7 C7 w, k& Z7 a: x& m9 C% s
var e=document.getElementById("contents");//对象是contents
5 I& r5 @8 Z$ f9 I7 j9 T
e.select(); //选择对象 & o! M( p$ U7 D! |5 l( n
tag=document.execCommand("Copy"); //执行浏览器复制命令! l# a% z& s, M$ v" E/ W
if(tag){
/ `- U# D3 y! u8 a# u
alert('复制内容成功');
" a) p. a+ _0 o& p$ i6 @* J
}
7 O# X. H! U9 T
} 1 V$ f- W; R1 [5 {2 O
7 c1 o5 B$ r/ w5 w1 {
</script>
# N8 L# N1 f, }7 j# y$ P8 l6 ^
<textarea id="contents" cols="40" rows="5"></textarea>
4 S# t O/ A" z: @/ |$ |3 a. ~4 k
<br />7 W: j; O% G( V4 A% m( q$ K
<input type="button" onClick="jsCopy();" value="复制" /># n8 P% g) E' g g
</body>
. F8 q- T3 K. T' }1 i
</html>' E w/ h4 i7 G' z

复制代码

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

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

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