点击按钮复制到剪贴板 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>/ K( F \6 g' M. G. J8 i/ C- ]
<html lang="en">
9 P2 p1 ^2 a# K' `
<head>
4 w& t+ j0 O$ y3 n
<meta charset="UTF-8">
& {. g) j. x9 f; F! D3 L
<meta name="viewport" content="width=device-width, initial-scale=1">
s' r# d1 {* U) X9 ^
<title>Document</title>
+ w. F1 F1 T3 y0 y9 c
</head>+ I, @8 m, b5 b0 ^1 l
<body>( C5 n% o5 z% m1 E
<script data-cfhash='f9e31' type="text/javascript">( v- R. f9 ]% R( o: v
function jsCopy(){0 r4 e8 G" q( h# G6 r- ]3 a! Q
var e=document.getElementById("copy-num");//对象是copy-num1
/ G7 i( j9 v2 z* V+ c9 I' E# R
e.select(); //选择对象. F7 P+ W: e/ w/ e+ r
document.execCommand("Copy"); //执行浏览器复制命令" Z, J7 }/ h& w' ~
alert("复制成功");
; [6 R& r- U' p, [
}6 _( x [$ m5 \7 }8 J
/* <![CDATA[ */9 O( S4 l4 F$ N6 i9 h0 l
!) Q' R0 B9 z3 F4 ]) c% N0 K( X
function() {( T$ P5 H4 v0 ~, W3 m
try {
! L5 {/ `3 ^6 @4 n
var t = "currentScript" in document ? document.currentScript: function() {4 ~$ {! Z7 { W: P& O, C
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]! S8 H4 `" m5 J6 ]" C ^2 u5 w
} ();' c% a, P7 i- Z9 p* ^: F
if (t && t.previousSibling) {- S1 s; H' i3 j% X
var e, r, n, i, c = t.previousSibling,
* p3 a/ s: Q4 h/ ?+ u$ f2 [; J
a = c.getAttribute("data-cfemail");- p; B2 y6 n, C9 ~' V
if (a) {
6 m5 m2 Z/ Z/ h5 y3 o1 S
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
& [ w- u' G% o8 c4 W( I
e += String.fromCharCode(i);
# c6 z5 o3 z9 M) v1 l( E; @
e = document.createTextNode(e),
: W ^$ u% ~( w( k% q, d' ^
c.parentNode.replaceChild(e, c)& v R8 n1 n X" F/ F8 [
}7 N0 O$ l8 Z- r2 J
t.parentNode.removeChild(t);0 p/ N! b# ~# j4 w$ h
}
/ x# Z5 m' n; a1 s6 I0 r. Y
} catch(u) {}% }( v' t" ?0 r- ?; y. C
} ()
0 k5 G) a2 P: ^1 ^( V4 b7 ]% O
/* ]]> */& R3 {( \/ [! h1 _
6 J6 d" E+ b+ q8 F% w! P- q9 Z
</script>& d6 t/ f- X; d; x; a6 ~
<div class="nav navbar-top-links navbar-right">
2 O2 J6 ~. ^/ k7 l; [
<li>推广链接：</li>
6 W' s2 j: ^& d: [" E$ w6 u$ u' L
& w: E4 d& _" W. 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>
2 `' Z0 @) K4 D+ W9 O
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>: J' Z5 A# @5 {! X% T
: I6 p+ ^( o2 Q$ W- S. i
</div>
1 F, [5 E# Q4 @4 W' ^6 l3 K0 l3 v
</body>5 H5 m! g4 z9 d+ K7 L
</html>
1 P# M, D/ x& b8 C( p3 `+ l

复制代码

案例二：

<html>
* w/ K8 x) L! U, C
<head>* Q1 o: q3 Y+ `3 c b1 R8 ~0 P" B
<meta charset="UTF-8">- n o. w# \* D% q9 G5 t6 m
<meta name="viewport" content="width=device-width, initial-scale=1">, N% U% M7 ^/ l8 J7 B1 U8 X' a
<title>Zero Clipboard Test</title>
; g( e t5 ]9 j% p8 u" M4 y
</script>0 f1 G( ~- K& W; {* k: X
</head>
6 P$ [+ k% Y/ m4 C" u6 s! E
<body>
$ t0 p0 n9 K/ r W) k# e
<script type="text/javascript"> 4 ?/ o g/ y9 c! }0 e* p# U* m) G% e. v
function jsCopy(){
+ G: W7 n; b, P& J
var e=document.getElementById("contents");//对象是contents $ x' v( L% S; t6 B) A
e.select(); //选择对象 ) \; ~. Q) f9 K! g7 F) }
tag=document.execCommand("Copy"); //执行浏览器复制命令
/ ~( @ f& k4 W8 f3 c
if(tag){- |6 m$ e7 c. D; k% |8 R
alert('复制内容成功');
8 `$ r' _. X% {( V
}! e' v5 Q/ N' I- U+ A# |: [
} % A% W) u1 J1 x4 e4 R$ Q
4 E' |( f/ U6 y f' r
</script> 2 i/ J! E1 G8 Q( R! P9 N
<textarea id="contents" cols="40" rows="5"></textarea>
# j& E/ a; n) T$ W
<br />2 K. w7 p i& H b% ~, c
<input type="button" onClick="jsCopy();" value="复制" />3 ?3 ?& m" J! y# v& l
</body>
/ Z0 l: j# G) s* j5 v
</html>
. }8 E! m; y9 O7 e( U( ]

复制代码

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

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

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