点击按钮复制到剪贴板 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 o* Y. Q% L, R; b9 A" R
<html lang="en">
) v% K$ a/ F2 F' X3 z
<head>2 H" {$ v6 V( }& ?1 o
<meta charset="UTF-8">% S& X2 T7 s" k6 k: F# j! ~9 n2 r
<meta name="viewport" content="width=device-width, initial-scale=1">; q+ s/ W' n+ g2 _' E
<title>Document</title>
) d0 N# e6 g& K/ E
</head>, J" j3 V3 R6 C& z
<body>
" _6 }, ~% M5 z& _
<script data-cfhash='f9e31' type="text/javascript">! D1 E" u6 N( u$ ?
function jsCopy(){
, k+ e, C7 W8 G5 a' O
var e=document.getElementById("copy-num");//对象是copy-num1+ Y P' r" \; @8 [- H7 z" ]' l
e.select(); //选择对象! ?9 W0 @& ]( J$ E: _+ _
document.execCommand("Copy"); //执行浏览器复制命令
# A- z9 y7 G* s9 t
alert("复制成功");
( A. c) S2 L" E: e0 Q5 A7 i& |
}4 C1 Q1 H& I; @
/* <![CDATA[ */3 D" r- I# W. r3 ^
!
6 C c2 ? d) R0 C; t
function() {
% t9 X* ?' q6 Z( t' {8 k9 K
try {
- L0 M+ ~6 f0 P9 M1 l% ~
var t = "currentScript" in document ? document.currentScript: function() {
2 t5 O& V9 K5 }3 B- O8 J# u' J+ `
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]
* O9 {1 {2 Z5 `7 _
} ();
[, c! C# D# k" h Z% l' E
if (t && t.previousSibling) {1 C2 d% x* u9 e- ~4 z+ d1 E4 M. e* k
var e, r, n, i, c = t.previousSibling,, m9 r4 Z- Q e
a = c.getAttribute("data-cfemail");) k4 X- ?+ `6 X
if (a) {; B0 h* K/ t! i" r7 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,2 a* a Y9 L" @6 Z
e += String.fromCharCode(i);
, N7 W1 n- G5 Y* g9 L+ i$ ?! u
e = document.createTextNode(e),; A/ n8 U5 p. |( {3 M) o
c.parentNode.replaceChild(e, c)
5 F& p' N+ p, |- Z, z# k2 P" g/ k
}7 B5 L( K4 _2 U/ U3 e7 o4 z
t.parentNode.removeChild(t);, j3 e# ~& ^4 ]! f
}' R- y" P% v" L a9 D5 L6 }
} catch(u) {}/ A: t8 V9 |, f# ?
} ()
+ X6 ?" z5 }- k- \, y A
/* ]]> */& j$ L5 b; i% }
$ s0 Y, `2 N' F& _& v% ?
</script>4 B) H, ]0 l* m" P( N0 S( n
<div class="nav navbar-top-links navbar-right">' p# c& g& T& I9 \6 K$ B
<li>推广链接：</li>1 q8 c$ S/ a4 x" B) p, o8 p' F
; ^; ?# z2 B" A1 b
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>
3 @, m* l$ h$ J: e. v0 s: Y. w
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>$ j, B" S9 _* _2 o: P3 q8 t
- w9 ~( T5 f% O+ J
</div>
3 v4 Y6 y2 t) X' V
</body>6 R& L+ [' T5 z
</html>
6 _5 O( t- N1 }0 g) I0 u# P( x

复制代码

案例二：

<html>( P7 U' U- D% s6 w/ V+ j U
<head>
) y9 m9 H! U) {% U1 q
<meta charset="UTF-8">
# u2 ^$ D) p$ O( y4 [' [, }6 `
<meta name="viewport" content="width=device-width, initial-scale=1">2 B; A8 M- ]! h0 L
<title>Zero Clipboard Test</title>
! c7 M' |6 E9 o5 v
</script>
& U! c5 X7 @. v6 K, u, n
</head> Q$ ~- A+ z9 `' |, M
<body>
' l7 Q' N K2 r/ H
<script type="text/javascript"> 2 Q4 _" R, A& }
function jsCopy(){
1 c( s2 [$ G) ]
var e=document.getElementById("contents");//对象是contents
9 Z4 ^; L! x1 c& V2 z6 p' N
e.select(); //选择对象
+ i5 I4 b8 u- b$ G) v: }
tag=document.execCommand("Copy"); //执行浏览器复制命令
0 a0 S* T# p- `( N' G0 R
if(tag){- ?8 w/ H3 Y4 c7 D% t5 G! P0 Q
alert('复制内容成功');
7 Y. T$ D1 u- m' y* k( ^
}
- A1 z9 q3 v: v$ X+ Y& J
}
/ Q, E, _" B$ H0 w) ~. t
/ p- k8 {& \* o3 p8 y" {
</script>
9 a6 P+ W* C" Y( k9 S( u% @' m
<textarea id="contents" cols="40" rows="5"></textarea>; C9 T! n3 l, r5 Z) M0 B# n
<br />, R: I2 g) i0 i4 J8 \
<input type="button" onClick="jsCopy();" value="复制" />1 z0 ?; [# _% f6 G1 w# T& F
</body>* `4 i) K( T' K- z+ o
</html>
# b8 g, x, G' X

复制代码

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

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

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