点击按钮复制到剪贴板 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 j9 H( K: z* y5 ~- {
<html lang="en">
x- p1 p& M' h
<head>1 I6 C- {6 ^ \& R9 R; F
<meta charset="UTF-8">
9 H: I% j* U* z* J, w
<meta name="viewport" content="width=device-width, initial-scale=1">5 K; L; B, j9 w) }, l6 Y. u' M
<title>Document</title>- v2 r2 B0 m8 D- a. d2 q. A; k1 }; s
</head>& g7 o; ?3 I+ }1 A, ^1 `
<body>0 f# @; y2 ^, S# T4 |' W
<script data-cfhash='f9e31' type="text/javascript">% ]% ~+ J5 Q1 l
function jsCopy(){
3 P6 G0 j3 [7 S
var e=document.getElementById("copy-num");//对象是copy-num1
- `8 m5 ?5 o7 g# A! N( t1 h
e.select(); //选择对象
q g7 W4 T8 b+ o; v1 E3 I
document.execCommand("Copy"); //执行浏览器复制命令( ~+ u6 {1 r* S8 d8 {7 H, R) \& V) T
alert("复制成功");8 V$ O. r" t8 S
}
9 h$ n! m' u8 m- e C! L$ b$ L
/* <![CDATA[ */' D1 q& G& J! k( ^- \
!, g# _, r8 o% k8 ]9 |
function() {4 H; y& }9 ?& ]- \, j. d C0 `
try {) J9 M4 }% m2 V9 F
var t = "currentScript" in document ? document.currentScript: function() {
" y" m! g5 Y* h# g3 ]
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]% `7 c" Q# n0 ~) @! j1 t
} ();
+ ?1 ]' B0 U. f p" f d
if (t && t.previousSibling) {! Q$ E) g8 ?+ T: U7 K' ?- f6 d" C
var e, r, n, i, c = t.previousSibling,% Z# p" J- w( S& u- o# i9 K
a = c.getAttribute("data-cfemail");
% N) K* C J* \4 m- c/ F3 A$ h9 d
if (a) {1 `! H; U+ M1 M4 G* x( w; p5 M9 t7 N
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,
e += String.fromCharCode(i);0 [' R5 H: I/ `& V1 j
e = document.createTextNode(e),0 R) M g# m( }% E
c.parentNode.replaceChild(e, c)* _) j' O1 {, K& F+ l k$ V7 I
}. D d" m6 |" E
t.parentNode.removeChild(t);; l) U; {$ f0 n0 U$ E( {
}7 \! n! s: X8 t" x8 A9 v
} catch(u) {}
% y1 O, @- C3 a6 c% r
} ()
7 z( t3 s; B5 T; `
/* ]]> */
8 g1 ]/ O; n. k6 d
M! d$ V* t1 p7 F+ X
</script>
' Z3 R# [( ]5 V7 a g! n
<div class="nav navbar-top-links navbar-right">- h$ y( q0 C( j
<li>推广链接：</li>: f2 H, O- t, s! e1 q: A
" v0 o( g" S" A* _
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>& y3 {% L2 J$ W. @1 V0 x
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>" ~1 |5 k6 K* o" l
- ?* U7 x* `7 c! T' ?! X
</div>8 N. ~1 a) }+ U e
</body>
. L* c7 F1 m% Z l# c" s
</html>
& Z Z. f7 k) l U- K

复制代码

案例二：

<html>
( L! i C6 h. m# O! n& X
<head>- v* Z1 w: H* _! J4 D+ z
<meta charset="UTF-8">% @% J8 u& J6 J0 K1 {0 K. {
<meta name="viewport" content="width=device-width, initial-scale=1">
( c3 b! j% d3 r$ u
<title>Zero Clipboard Test</title>
- j: i6 u. l; @; U
</script>7 ~- h3 _6 X0 D# ^8 T! Q
</head>
; j4 `" g" i) \5 A- F8 A( O
<body>
; p, f! O6 H! w2 L- |, F
<script type="text/javascript"> 3 Y$ o9 m$ M+ H) C# U
function jsCopy(){ ) W6 X6 l1 O \7 h# h8 ?! k
var e=document.getElementById("contents");//对象是contents $ F7 r0 @6 U# g" F h1 s1 j5 A
e.select(); //选择对象
$ I7 J' L) n# F3 N" U" |) V
tag=document.execCommand("Copy"); //执行浏览器复制命令
# I7 Z! t8 W' {$ T. i& P0 p5 v
if(tag){
: u" z, o. L1 R2 K: R+ M
alert('复制内容成功');
/ B8 ^; ~/ B8 [$ r
}- F* f, k9 P0 S$ o
}
& d6 r- ?0 C8 E
6 C/ t1 a& f: Y1 ~! s/ R
</script> . R: z3 d i3 d, n. j/ H* A- }
<textarea id="contents" cols="40" rows="5"></textarea>
/ Y$ D! l0 E- f6 x& _/ E9 c2 P
<br />
* S% C r S0 q+ O! m
<input type="button" onClick="jsCopy();" value="复制" />
" _- X% Q3 z8 W5 s9 v' K
</body>1 t- @! _% G/ s/ ?0 G) c$ x) f
</html>
! w* G7 i$ {; G4 i

复制代码

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

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

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