点击按钮复制到剪贴板 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>6 j# M" I/ D5 t2 s% j* T r
<html lang="en">
9 @2 j* q2 C% N4 w- Y$ b+ f$ K
<head>
& |! o3 d$ ?3 ?
<meta charset="UTF-8">( {5 S. A! m+ ^/ T( C) H" X6 w
<meta name="viewport" content="width=device-width, initial-scale=1">
r" w) f7 ]! G- U, T' D- V
<title>Document</title>6 c! l# S# T7 b
</head>9 m2 n; k" H2 }% \7 ?
<body>- q- D. @6 {7 t- _% `) m! {* y
<script data-cfhash='f9e31' type="text/javascript">: x, @0 O% }, P' @" }% W
function jsCopy(){
# {9 q" l: n9 E5 i% K, k
var e=document.getElementById("copy-num");//对象是copy-num1) y, F5 G9 }) H7 t& N
e.select(); //选择对象/ Z# W' a. z( d( G9 b! @' g* W
document.execCommand("Copy"); //执行浏览器复制命令
$ y! e7 E0 L( a& p& {# ?% P F7 ^
alert("复制成功");
}% k; O. H3 j! R" x1 u* J2 v/ }
/* <![CDATA[ */
% P7 h. s& M! C2 s9 l- ]- ^& d' ]
!. [# \/ C2 w0 b+ Z
function() {
8 k$ y' F" r" Z/ e
try {/ E7 F x k; f! R& w+ B4 h
var t = "currentScript" in document ? document.currentScript: function() {* Y0 B# F+ z {6 J% ]9 P
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]' Z8 y' a/ C7 l
} ();
9 c- O) t+ B$ ?6 o, j6 S( O- g1 E7 l1 ^
if (t && t.previousSibling) {& G$ }9 @8 n9 R( O3 g0 W& I
var e, r, n, i, c = t.previousSibling,
`; B ^ r* ^" H! D; w: A
a = c.getAttribute("data-cfemail");( q5 Z- }4 [& C F, B7 W
if (a) {- n( C. h! y5 E7 s3 q
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
. {8 V T3 U, Z2 T
e += String.fromCharCode(i);
2 S. Y# j1 n) n* e
e = document.createTextNode(e),
$ T+ F" }+ i0 a# l# ~) T( l
c.parentNode.replaceChild(e, c)2 }" A6 g& z/ |7 B
}
3 T: E8 [* P6 c% @5 I
t.parentNode.removeChild(t);! }$ n' d2 M6 I
}
, o7 V+ S! R2 N% }. y/ h+ n, c
} catch(u) {}
1 _1 d* I! o# \! B
} ()( `8 ~* ]; h. ^! S: Y+ x1 l
/* ]]> */
% G0 p+ @1 F8 Q6 Y) D# @" _/ G
4 d0 X! n0 o2 X4 u) s9 g; D
</script>5 ^. ?7 R w9 V. C& x
<div class="nav navbar-top-links navbar-right">6 k! @( V- U( Y4 X- _; l) C$ K
<li>推广链接：</li>& T' }9 k; h. g4 r0 c- a
4 [/ ?* j9 z# r$ V5 z1 S
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>0 a1 z/ v' r; J* g5 n
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>! ^% v: }8 C1 s, U. p' d/ ?
3 k% K* h0 ~! u0 t, ?' t* t
</div>
1 t7 ~& Z# F: F; c; N" ~, H# p
</body>
1 h" r# r6 \# x: o
</html>/ i+ B# K+ F A* k9 o5 Y. \7 Q

复制代码

案例二：

<html>
( @) z E* N# }5 ^4 i
<head>
# E9 H7 e# @6 o/ n! x6 |3 A
<meta charset="UTF-8">
7 r5 a/ @8 W5 @* p# p
<meta name="viewport" content="width=device-width, initial-scale=1">
! \! {( j; b% J3 c
<title>Zero Clipboard Test</title>
6 y" m' G# x9 m
</script>
# I- u5 F' E5 g
</head>
4 |& Z0 f8 J% y2 E/ [8 o
<body>
: m) o4 X+ ?. H
<script type="text/javascript">
# u2 D* t1 g+ e- b" D; E3 I+ E
function jsCopy(){
4 m1 u$ k8 w5 i1 x
var e=document.getElementById("contents");//对象是contents ; D. I+ o) x ?! _5 y! j! J) ^/ ]
e.select(); //选择对象
tag=document.execCommand("Copy"); //执行浏览器复制命令
3 E3 {, @/ s3 \$ W
if(tag){ c1 s( L8 k2 \! C. s; U6 j6 v! c
alert('复制内容成功');
) P1 i3 k; m u: n
}+ ?# O" Z2 z2 n* K
}
s. S; N9 t- M2 a$ z
</script>
" ^# r0 j8 W2 ^; @* B
<textarea id="contents" cols="40" rows="5"></textarea>
7 c5 b( N3 q4 u: A
<br />
% o A5 ~' N9 m& x" ~' O3 S% h
<input type="button" onClick="jsCopy();" value="复制" />
# R# g! E# g. ?
</body>
% `* v/ z) f+ Y" ]
</html>; Z( X' r- g1 f3 O% o

复制代码

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

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

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

浏览过的版块