点击按钮复制到剪贴板 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>
8 ?/ @' s, Y) t# M! _4 k
<html lang="en">
- w U L2 e6 K8 i2 B+ q
<head>
. y0 ?4 g* z$ T. s' T( ]
<meta charset="UTF-8">
$ f# N: O( T& E; V; k
<meta name="viewport" content="width=device-width, initial-scale=1">" D1 A* q- r. E! O4 A/ O) Y5 N1 h
<title>Document</title>( k6 h. o2 y6 N( `, m
</head>
+ j7 s5 a: [, ?* f$ a' T B6 @4 I
<body> q( Q3 e1 w# E9 \
<script data-cfhash='f9e31' type="text/javascript">
1 ~0 U/ a2 \8 x) m" T# q7 \& T% G
function jsCopy(){# y6 ?& {, r% `! f) t) a
var e=document.getElementById("copy-num");//对象是copy-num1, W" X6 m& ~# `+ T, \6 U$ L
e.select(); //选择对象
/ _- T. N& ~# T; T6 f
document.execCommand("Copy"); //执行浏览器复制命令& G. t+ d/ O2 S/ J; U# a
alert("复制成功");, l9 V1 n2 q3 @( K& |
}5 D2 f; e* Z9 v* P
/* <![CDATA[ */$ v1 V& Z: Y1 n$ P$ d. P/ ]
!" ]; F N# y( z$ r. b
function() {' }8 d2 c( Y- W. Y( X0 G5 l/ ]
try {9 q& g/ S) V+ I2 M2 S" v# j: V8 U7 a
var t = "currentScript" in document ? document.currentScript: function() {3 w0 N6 {" J7 d( g4 z$ Y
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]
; m* Z: [; m9 }& o
} ();
" H) ?' x& U r& y
if (t && t.previousSibling) {
\' u3 ]( |# l
var e, r, n, i, c = t.previousSibling," ~# p- S7 r# Z4 ?, h- Y
a = c.getAttribute("data-cfemail");
$ J6 \& k" K& ~" ^
if (a) {
" u" x6 |9 K& h
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,+ j) W* C5 u( U2 s0 A* R
e += String.fromCharCode(i);
/ s1 Q1 L& n. B" I; U9 ?7 L
e = document.createTextNode(e),
3 K7 l f) B1 s$ W" V3 b0 p$ W
c.parentNode.replaceChild(e, c)
' u/ [) c# ?+ a3 B$ t1 M/ Z
}- W1 H) s/ \- W6 s9 h( a/ V
t.parentNode.removeChild(t);
$ e# S& M# c* R N
}8 p) G3 J( A* ^* {* w9 |7 h3 L! P
} catch(u) {}$ r2 K; C$ M! }3 |, Z/ W
} ()
( Z- V" [) D: T c
/* ]]> */
8 l5 Q, w3 M: M! `7 T* z) q! _6 J
3 o+ g! ^: y. ~4 K2 V2 p3 ?
</script>
# ?" A6 S Q9 V
<div class="nav navbar-top-links navbar-right">
0 m% I$ }* H b! w; M# a
<li>推广链接：</li>. s7 R+ q0 K! R2 x; L
* c7 @) X; Q+ w/ i
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>
) D+ `9 q9 G6 y8 v7 O
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>1 N% C( N- j+ D' j% e
8 V) w' I; }3 }3 w% G
</div>
8 x5 w Y" y# g
</body>
' ~: b" ~3 D% b
</html>

复制代码

案例二：

<html>1 v8 S- Y9 v* o# V6 z" V
<head>. F0 |/ U, o! R# W8 S+ k
<meta charset="UTF-8">7 A0 ~3 P8 q' g0 Y% W7 o, k d
<meta name="viewport" content="width=device-width, initial-scale=1">+ Q, o: ?- {- |+ ]- g( C( i
<title>Zero Clipboard Test</title>
" ?9 @5 N0 m* K( C( c# s4 Y
</script>
, V! I) u" `* H$ ^
</head>* _5 w9 g8 B& y0 Y5 y: e# ~
<body>
; E+ r8 b( e$ J4 a n" U
<script type="text/javascript">
# I- B6 ~2 j H. H& l
function jsCopy(){ 7 C1 R, m) E/ r, T$ |, @: m
var e=document.getElementById("contents");//对象是contents
3 u% _( K% V$ r A3 k9 k
e.select(); //选择对象 . X3 |$ H- |) ?: M, e
tag=document.execCommand("Copy"); //执行浏览器复制命令
, x* X" G. L9 i g& d
if(tag){
2 [3 V3 `! v- N
alert('复制内容成功');8 d' H3 r2 w/ P/ M) X7 W
}: p V) Y2 r1 C5 L3 Z/ [6 L% p
} % @, y$ Z l! g+ z0 C# w: [
, w& |" n4 z5 n! w0 n
</script> & d* Y: F0 ]6 d) b1 _; v
<textarea id="contents" cols="40" rows="5"></textarea>
3 {" f, _" O+ _" ?/ p. ?
<br />
- W {2 C! a+ x% n6 o3 n6 e
<input type="button" onClick="jsCopy();" value="复制" />& ?( A* P4 f# d) @0 }% ~
</body>9 r5 ^3 c+ o: g% B j/ h
</html>. m) u) Q) i. z+ S. A

复制代码

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

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

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