点击按钮复制到剪贴板 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>
" R, D6 W' m& Z$ [* q
<html lang="en">
~/ g) s* |/ L% S( C
<head>
) ^. t1 z5 |# g0 s3 I! o
<meta charset="UTF-8">6 w8 Z/ u! V- M! Y: x: ?
<meta name="viewport" content="width=device-width, initial-scale=1">
* |* J2 @- @0 g% M
<title>Document</title>
; f) S% ]3 [- I6 @" @/ z
</head>
- ?6 n, Y- A5 ^/ v# T- B
<body>
: _8 V! M8 G$ v5 M
<script data-cfhash='f9e31' type="text/javascript">
5 j$ F* n X! N; |( Y5 }4 G$ d
function jsCopy(){6 l4 t1 ` r" r$ |
var e=document.getElementById("copy-num");//对象是copy-num1
& d2 j7 z# {4 H q
e.select(); //选择对象
2 t: x1 h. X* J1 U$ d) j
document.execCommand("Copy"); //执行浏览器复制命令- y6 a' b8 C3 R3 U, K0 h
alert("复制成功");% h; z4 S- h( w! B! P% i
}, i6 V% e% Q0 Z' v/ }) ~- q5 q
/* <![CDATA[ */
) \4 f' @7 K7 d) y/ Q5 P: Y$ ?8 ^
!
; j- c/ j; v! G2 ?) ^7 U# f8 }
function() {9 @6 K. G' R& ^. s0 T# V
try {! I, {$ S% k/ \# d
var t = "currentScript" in document ? document.currentScript: function() {
: C( f5 k' x! ]" g' s! w" k
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]. ]; H# _. y( H5 o/ U8 N
} ();
0 _0 e" D" H4 M' N8 f
if (t && t.previousSibling) {* _8 x! z$ r$ z. K2 L5 q
var e, r, n, i, c = t.previousSibling,
$ K3 o; U5 Q3 G: j) B
a = c.getAttribute("data-cfemail");+ a2 g9 k4 k0 A# x5 J) K
if (a) {
6 d& O0 k! G* C* G& k
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 S/ u) e- I% C! s+ t
e += String.fromCharCode(i);
$ I* a: Q2 g u
e = document.createTextNode(e),5 k, i/ ^) I! G+ ~2 }
c.parentNode.replaceChild(e, c)
+ s0 {/ ~0 I3 b3 ^- F
}
8 Q2 L/ F" L1 ~# \/ V& f# d
t.parentNode.removeChild(t);
! ?3 `- ?9 r, d% p0 I* d; y9 {
}& T) i" R3 L4 s4 I
} catch(u) {}
4 q* ~0 [0 P6 X" [9 @
} ()
4 F' S7 M$ \1 V, R" _1 H
/* ]]> */
- [+ E# E0 h& _9 L: \+ o; W) Z6 P
# N8 P9 H' s0 `
</script>- v$ O( a: h/ n7 I2 p
<div class="nav navbar-top-links navbar-right">
1 ]3 M/ u6 |4 e; R4 ?, y
<li>推广链接：</li>* X+ H; i! p$ [% B( x7 \& @8 [
- z9 \( x" m" ?) h2 n( y- Q
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>
. p& x. h7 V) D3 o0 X
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>2 g* |( j. z: x1 I+ k
8 O+ f2 P/ s$ B D
</div>
" a# G3 f) f9 [6 [
</body># Q, X+ J) W9 V6 N& v3 ~6 C
</html>
; l! i3 l# H9 Y, P- ?% [4 F2 _

复制代码

案例二：

<html>2 L! j/ l: j+ {
<head>
$ }* {# @/ H% }0 c4 q
<meta charset="UTF-8">3 s! g3 Z) @( M( b+ J
<meta name="viewport" content="width=device-width, initial-scale=1">
' K, g7 A+ I. c+ O1 i+ n0 |
<title>Zero Clipboard Test</title>
- v9 y2 ~2 Z6 e; [. O/ c- r
</script>
( B& H+ F, U6 j7 F0 H6 p
</head>+ u8 q6 e$ d8 n# l; a. Y
<body>
& F/ R/ M2 L. P, q, N. ]
<script type="text/javascript">
6 N# W {2 H& h7 G3 U5 `3 A/ O! \
function jsCopy(){ * A+ f. a' l. c7 Z6 h8 ^. l! x2 G$ E
var e=document.getElementById("contents");//对象是contents ' ?: l5 z$ b8 T0 A. B
e.select(); //选择对象 + r4 }& S# M$ C" F9 B3 I
tag=document.execCommand("Copy"); //执行浏览器复制命令
) D; f6 F8 P# p' r% j8 y: j
if(tag){/ Q; I2 g$ [/ s+ e
alert('复制内容成功');* z- \9 d0 ]+ y! ^( v) l
}
- v7 D* S+ T1 V0 s: s% p6 L
}
& K/ P# S) k1 s
: J5 }1 e: }. @ f& _$ P1 ~
</script> / ^& ^& s* J* S& A( j. Q, K
<textarea id="contents" cols="40" rows="5"></textarea>4 w" u( ]+ n z/ e+ Q. C. T
<br />
* b, W2 W. \' l- Q* h$ ?' u7 g Z4 D
<input type="button" onClick="jsCopy();" value="复制" />/ A' E; a$ i2 W! s0 F9 p% K( S
</body> n3 f2 J' y: [3 R! Z
</html>
# z( D- a, b; C, o0 C# ^

复制代码

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

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

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