点击按钮复制到剪贴板 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>$ O" M1 l) ~# ^( {! o
<html lang="en">
* a) u+ c1 |# X) E$ L3 H
<head>
7 k. m; ~! T3 r8 V' s$ B
<meta charset="UTF-8">! T' h3 l: S5 R2 P- S' _. \
<meta name="viewport" content="width=device-width, initial-scale=1">
8 v( `4 \# O3 M% {
<title>Document</title>& p, ^- f r9 y/ S& _( |) @9 X) l9 F% ^
</head>
- d% x! U( ]6 r9 q* Y
<body>
' F* x0 l6 H( d# @% Y0 m. K
<script data-cfhash='f9e31' type="text/javascript">/ w' z. W' h6 e- L: O y
function jsCopy(){
& k; i" C' R! Z" R) `$ v
var e=document.getElementById("copy-num");//对象是copy-num1% Q& a2 g1 F0 ^
e.select(); //选择对象/ D. u8 M h8 R$ @' _5 m3 m
document.execCommand("Copy"); //执行浏览器复制命令( G2 f3 H! ^4 a, {' e# Z4 b, \9 |
alert("复制成功");
6 @; D$ H& B4 W1 ^- i+ @3 F- v+ J
}
! q. F$ C' M+ B# j
/* <![CDATA[ *// x, q6 K' B& j( N
!
- Z8 ]* }' d. h. k1 x/ }0 o- f! _
function() {
) |6 @$ B+ O8 u. i) i7 ~4 M* {3 i
try {
/ z. {/ w$ |6 U, M9 E/ i
var t = "currentScript" in document ? document.currentScript: function() {
. e! {3 ~. l4 ~& Z7 x+ R( d: @
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]0 i! A8 y, V" m. o
} ();
: N0 N4 p* ?( Q% J
if (t && t.previousSibling) {
1 F3 C4 p3 w: q( X0 Z
var e, r, n, i, c = t.previousSibling,
, b) J0 J+ [! [ P7 g
a = c.getAttribute("data-cfemail");
0 h% B6 p' w u9 ?3 r, S
if (a) {# E/ i; F& u) v" [
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
. {# G! T4 M3 `9 n
e += String.fromCharCode(i);
/ Q- h+ H- l% {4 w& M+ H4 \
e = document.createTextNode(e),. ~* D2 ]) G$ c# _" D6 d7 i
c.parentNode.replaceChild(e, c)/ O. Q+ p2 t" J% w9 D& v
}* k! L/ A) `1 h) N: ]
t.parentNode.removeChild(t);4 @3 r& t0 c$ o
}
6 G9 w j! K# N( j: J
} catch(u) {}
0 [4 p, M/ |+ q4 Y! Z# i N: R! f3 ~
} ()
: m x9 g u8 g+ K8 w
/* ]]> */
3 a; w- P9 d5 t3 B% c
& \$ F' H) L2 p5 j
</script>
0 H" {" a9 s5 Y. n& k7 u$ ]( y9 m
<div class="nav navbar-top-links navbar-right">
# @* O7 V) M X9 z' W
<li>推广链接：</li>" R2 [* e" u) y; \* I" x1 }, U2 C4 ^- k
7 t& G+ k$ b; k; o0 N
<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" ?! `! r& R9 R& j
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>' M ?+ e8 m- O' S
9 L `; V; Z- F
</div>- r( {/ y+ g k4 z# C+ R
</body>+ R8 L. p0 E% [3 t+ Q7 |; S; `
</html>
: K. w h8 q* Y

复制代码

案例二：

<html>9 j8 G9 h2 L3 `
<head>) x& f0 f0 V4 |
<meta charset="UTF-8">
" J# u, u0 Q b2 E5 n" b
<meta name="viewport" content="width=device-width, initial-scale=1">
9 M w, Q1 L2 ] | x8 O' w
<title>Zero Clipboard Test</title>2 [% p5 l1 e+ Y) h
</script>
, _# A- S) h- ?3 E
</head>8 U/ V0 L: Y( H$ v: H) O2 l
<body>/ Y. H" V8 p e4 ~& `
<script type="text/javascript">
; L2 p7 x% W' \( l1 E; K
function jsCopy(){ 8 L3 m8 J4 \/ X4 E$ w$ q8 @+ t1 ]
var e=document.getElementById("contents");//对象是contents ) O9 F. l$ X9 r
e.select(); //选择对象
1 x* `+ B( R2 b2 M9 K* X
tag=document.execCommand("Copy"); //执行浏览器复制命令( @4 }% j' e8 w! E1 l
if(tag){. H6 |2 h0 l* g2 F& q X! J5 L
alert('复制内容成功');& R, n, Q8 O; h" A% C" {
}
/ ~6 R$ H5 r2 ^2 `
} . z, E! a" {( q
# ^) t& A1 m/ G- u6 E; j
</script> 3 o: l; a0 M8 D
<textarea id="contents" cols="40" rows="5"></textarea>( a* t8 m' F! a' u" K8 m
<br />( {1 f1 U0 {5 y; J( }& m
<input type="button" onClick="jsCopy();" value="复制" />* s$ z0 h3 u6 t: o
</body>
/ P: e' c( M# [2 c u/ q5 |9 ^
</html>8 D2 z( \! y1 q$ w6 v) y3 L# }* X% u

复制代码

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

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

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