点击按钮复制到剪贴板 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>
8 G% J O) y" S# g
<html lang="en">
9 a8 z) U) ^& ?
<head>
( Z% r8 l e# |5 C
<meta charset="UTF-8">& S a, r* c0 Z- Y8 ?8 k
<meta name="viewport" content="width=device-width, initial-scale=1">
+ l& X% Y- O# ]
<title>Document</title> u* @6 g8 b3 j& J/ z* J
</head>$ Y' t( u- a1 |+ z" W, w
<body>
- t% d) e! K& D: x
<script data-cfhash='f9e31' type="text/javascript">
, H. Q; u2 c5 w: S
function jsCopy(){- g r& u8 z" m4 ]* F, T4 a( W* D) }
var e=document.getElementById("copy-num");//对象是copy-num1
7 q! T3 L' w ?" W3 i! u8 O# A- M
e.select(); //选择对象$ t) h& @4 o6 c6 U* q
document.execCommand("Copy"); //执行浏览器复制命令
5 C$ }- `0 @ M
alert("复制成功");
" c9 u+ {$ J9 J( _, u
}- ^' m6 @& b( Q5 E" U* ~
/* <![CDATA[ */6 ~4 N7 p- w6 _+ d
!
7 f( [: y- y4 F& Y6 u. I
function() {" ]: l+ T$ f; w( M- b+ D
try {0 H4 k; B, e* b$ X3 \
var t = "currentScript" in document ? document.currentScript: function() {
" @) o9 V7 v# i% L4 [
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]) u# p; R$ v9 x- m
} ();
2 ~4 K) {! o# P& W1 L
if (t && t.previousSibling) {4 f+ W, z1 I6 d" Y0 b, E: \9 ^
var e, r, n, i, c = t.previousSibling,
% q- v( h8 P+ m; \0 z
a = c.getAttribute("data-cfemail");
k1 j- C3 ]: `7 D
if (a) {& ^. ]' E. e) _+ }9 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,: w) n9 p W# e0 Z0 M d: O x
e += String.fromCharCode(i);1 n" y, d7 u. ]: e# [3 b
e = document.createTextNode(e),
0 G9 M; Z% Q; a- j& C
c.parentNode.replaceChild(e, c)! L7 G* |5 o: ^. j( w8 d$ Y
}8 U! |# N& Q5 E0 k1 R8 @5 [
t.parentNode.removeChild(t);- h, B) f0 s8 m1 L1 `
}4 |; z' W; i' A8 w5 O! X
} catch(u) {}$ H6 a; u2 t6 Z' L: f) j3 F
} ()( }+ T2 _8 r3 Z0 V; H
/* ]]> */( _* |+ y1 I$ z7 i: K% X
% M) f! S4 y' j
</script>
, e+ F9 C6 g5 V! g
<div class="nav navbar-top-links navbar-right">. t3 v% K3 ^$ \' H
<li>推广链接：</li>
; X+ E& w+ @# b& {
" H& K. N m8 D5 U6 d% M4 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>. F: N' C# E! w) J
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
* z0 R& c# P) H# x1 ]& x# g# [
0 I9 c. _% }( v6 L8 N4 z* |
</div>
# Z/ q- Q9 V9 [& o3 B, b
</body>
" u& a2 Q9 i, L3 Q% W
</html>8 M6 Y1 Q5 p5 u5 G7 B+ W* ~

复制代码

案例二：

<html>" A- @- S6 l" J
<head>
G8 H# ~" ]. h2 S
<meta charset="UTF-8">
; U+ D$ w1 P, g9 b* Z; O
<meta name="viewport" content="width=device-width, initial-scale=1">
- a9 ]9 S) C' H8 w. E
<title>Zero Clipboard Test</title>; |* x6 F8 q9 j. T9 b2 Y
</script>
' T0 z3 p n0 W$ I
</head>( W1 l" I$ Y, n& C
<body>9 j! K4 I E& z* M. O6 ~
<script type="text/javascript"> . L( u6 m7 U6 v
function jsCopy(){
9 L- j+ T$ s N& a R
var e=document.getElementById("contents");//对象是contents
' Y0 |$ v5 p0 q/ m$ d& r
e.select(); //选择对象
3 I. M* B, H9 ^
tag=document.execCommand("Copy"); //执行浏览器复制命令
1 b: w. p7 t( ?8 `4 c8 w* y E
if(tag){
% E$ m3 P# Y) p* x) w2 h' x, z9 A
alert('复制内容成功');
; c2 f7 w% V* H' Y, v3 ]" A; D
}
( i0 v+ E4 {$ H$ L5 ]1 h V" B
}
/ W* c) U/ \. ~6 `" J- n7 b
- ^! t3 y" D: f+ ?7 a
</script> ) [1 D6 M, z, h/ K' ~4 N5 C3 g
<textarea id="contents" cols="40" rows="5"></textarea>
9 H7 L, h$ q6 ~; h- M. h
<br />
, v' o! x! K3 a5 [2 U1 F
<input type="button" onClick="jsCopy();" value="复制" />
% v: M; @3 N. Q9 K+ Z( F" ?* a1 t
</body>
9 x/ A4 R% J+ `2 l
</html>' j) D0 Y' E7 h: {. I

复制代码

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

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

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