点击按钮复制到剪贴板 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>
% B3 u' p1 C g$ W3 O( R; O
<html lang="en">$ u1 s0 E2 T8 y& l1 h* ~" @ E
<head>- C, x$ k* \( I5 u( T
<meta charset="UTF-8">: x% ]; Q) P: c9 a) \& ? b
<meta name="viewport" content="width=device-width, initial-scale=1">1 [% J8 |, k7 o3 i. O H
<title>Document</title>- J; p1 c* e' C5 T( E
</head>- o( M0 [* Y2 i
<body>1 _& [, w7 j; t( F6 I
<script data-cfhash='f9e31' type="text/javascript">
/ q) m% h g: d% Z1 |& e7 |
function jsCopy(){
2 X/ q& F3 D# B! v0 G
var e=document.getElementById("copy-num");//对象是copy-num18 [" C0 I2 `2 [7 w' Z3 M, v( N
e.select(); //选择对象
$ Y9 y/ j9 A; V4 L
document.execCommand("Copy"); //执行浏览器复制命令# R8 Z+ o% R2 r: Q* W0 K
alert("复制成功");
+ T) o' {6 [3 L3 I2 O, j
}$ M& n) Q) f q0 v$ }: j
/* <![CDATA[ */; k& j3 p0 ?- ?
!- o g+ ?# G* r4 x& x4 M8 {% S. g5 j
function() {
9 }" c4 i4 N1 q: U; ?4 X, x" K
try {
5 v! U/ l% P6 Q4 k0 J0 i7 Y
var t = "currentScript" in document ? document.currentScript: function() { j5 `/ X- Z" p6 W5 m
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]; W) u' H! m& A: y
} ();
2 a H' m. ~/ }. v( N# R5 a! \
if (t && t.previousSibling) {
) W+ [2 j2 w6 e9 J& A) U" G8 e
var e, r, n, i, c = t.previousSibling,1 l' F; |+ J/ @8 M- h/ {
a = c.getAttribute("data-cfemail");% `2 ~3 E+ x8 N A% B6 K. {
if (a) {5 n0 L4 c- B- r8 m
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
- Y* U$ w2 P. B# u( Z- a
e += String.fromCharCode(i);
. t6 b y! M" D5 |* T L
e = document.createTextNode(e),
) r( g% E) f% a$ H
c.parentNode.replaceChild(e, c)
$ r* @/ |( ` h+ P. h( A! ^- i
}
- f3 y2 R5 L. n8 a" ~
t.parentNode.removeChild(t);: Z9 {, J* Y2 a8 v: C
}7 d Z" f9 }( G5 G
} catch(u) {}/ _& D& `) K8 I. T b7 O
} ()
; [# o5 U' O w! W8 r. |% R
/* ]]> */
5 ^' k7 V T! d% o) O# P
# l2 J' x8 W# _5 E5 ~/ M4 P4 H
</script>3 p7 _! D* q7 f* l
<div class="nav navbar-top-links navbar-right">" z2 N( D: {7 x0 ?" v$ n3 H
<li>推广链接：</li>
# g2 y5 I0 a( T g/ Z
% J7 T7 ~" I$ 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>
1 }5 @8 b6 y' \" A
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>7 R' e1 @* O4 F1 V" P& s% k
) O$ v* m/ E- I. Y: I& \
</div>4 m0 d4 q& D& U+ d% X q+ P3 v
</body># m2 d* f+ c, |
</html>
2 y* W' t2 z, t' K3 S! G9 p

复制代码

案例二：

<html>
( K3 x! B0 @; r' H
<head>
/ o* F! {! S/ h
<meta charset="UTF-8">
$ v- R- q3 F" r1 s d; [
<meta name="viewport" content="width=device-width, initial-scale=1">! i1 W( Y; h0 r2 [
<title>Zero Clipboard Test</title>
# N0 ], @. `# Y0 e1 U& S
</script>
% i" P3 V4 E$ p9 q. S
</head>
. ]3 q* A/ z7 Z: A9 i+ l% y
<body>7 _ ~, e1 P! h; }. M- v: H
<script type="text/javascript"> 4 | Y8 G; g4 Z
function jsCopy(){ ' i9 @/ \! A& k/ p9 y$ X+ D
var e=document.getElementById("contents");//对象是contents
4 V. v$ a" @$ T/ {0 L, b9 I
e.select(); //选择对象
" W! S/ g8 K; i6 {0 d1 u! m2 _
tag=document.execCommand("Copy"); //执行浏览器复制命令
& L/ l2 p" E7 e3 h" ^. @/ ]! T
if(tag){% q0 W6 E# y/ ]; c
alert('复制内容成功');
7 d( ?4 |( L! x m- t+ o
}- w: |9 a X6 Y) T3 H. N% q
} 8 a) M3 J6 N! d
0 `! d. a# r4 Z/ X% d
</script>
6 [) |' u8 n8 \, U' {4 O
<textarea id="contents" cols="40" rows="5"></textarea>
8 h3 ]9 d* l6 ] h! d! L! I
<br />
2 W$ U9 G b3 u0 @$ v$ y
<input type="button" onClick="jsCopy();" value="复制" />
- {. B! i0 f7 l T w& }
</body>
- A/ _5 \6 R9 I( H0 E+ m
</html>6 ]" B3 C. F& J0 @, b& g

复制代码

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

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

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

浏览过的版块