点击按钮复制到剪贴板 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> X; S H6 x* v
<html lang="en">, c& f5 R1 ?4 N3 ?3 N
<head>4 H0 P+ k" x2 S
<meta charset="UTF-8">; b6 g ~1 g3 N& y+ }$ D* J2 i
<meta name="viewport" content="width=device-width, initial-scale=1">
4 k# S) q0 I* N! f% Q, ?# v
<title>Document</title>
; F7 S( b) z9 N/ q
</head>3 m( G9 o$ F5 v3 \6 O% Y& ^3 k' {3 B
<body>
% P- [* F+ s2 i6 P7 s8 p3 b
<script data-cfhash='f9e31' type="text/javascript">
. `$ {9 `* h/ ?% T8 o3 s
function jsCopy(){
( h$ \# E& |. a
var e=document.getElementById("copy-num");//对象是copy-num1
. e+ A! K) g1 r$ f4 F/ E( q
e.select(); //选择对象. B' L& Q* o U5 ^+ W
document.execCommand("Copy"); //执行浏览器复制命令: C) t$ w) b/ A7 T& j
alert("复制成功");$ u. \" N) g: o5 w
}
: i+ q0 u' G3 U7 O; [0 x3 a" C
/* <![CDATA[ */
. L& r+ ~ B# S1 O
!
5 _# Y1 o, x6 R
function() {7 J& i6 Y: l# f8 o4 I
try {
1 V' I8 k$ q& A3 c
var t = "currentScript" in document ? document.currentScript: function() {
1 Q A" Y5 F3 F3 U% @
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]
( A3 t9 p# y4 j; @: E
} ();, R) Q0 B. ? u- t+ s" }# u
if (t && t.previousSibling) {
! _: v# F0 u3 C5 z
var e, r, n, i, c = t.previousSibling,
: W1 \1 M% ?: P! I( [
a = c.getAttribute("data-cfemail");5 X1 [$ W( @5 n+ {! K
if (a) {
7 I" x; r/ N1 u& x) G g* g' f
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,4 u* I& ^) u' I( I P5 `
e += String.fromCharCode(i);
& v3 g, c7 B8 w6 w* w4 v5 Q
e = document.createTextNode(e),
- u" C5 m2 r: A( u: ]
c.parentNode.replaceChild(e, c)
: p' o% P4 v' R! M- B$ w
}+ Q/ n# Z) L% t2 h; h
t.parentNode.removeChild(t);
2 D) S; H9 ?3 Z' p7 v
}! G! R4 B$ u4 @( W, k
} catch(u) {}' }* M- S# j2 r
} ()
, e0 V D: D" m
/* ]]> */! M9 ?9 u: R6 a# `
! q- O# n" X$ D& R0 B
</script>
9 b6 n: T% @ e% y0 `' @- X
<div class="nav navbar-top-links navbar-right">- T" R- x1 w/ W+ i2 l- x
<li>推广链接：</li>
( H8 M& y/ o# l+ i
* @* R; L$ P/ ]
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li> d8 u$ s2 m' z) b4 K' K% p
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
* M! m! j+ ]. v/ J# i+ l
1 i) v+ N9 L2 E @. \
</div>
6 {& s% e, `8 a: D/ k4 v
</body>
* O3 O. C: z1 X' T) q: u5 y
</html>9 V3 f0 W$ E, A. t0 ?

复制代码

案例二：

<html> |' S! m8 ?6 J. |" a6 w+ t. h
<head>7 c. ?9 b/ u( u4 w" J; A
<meta charset="UTF-8">+ c# F$ p) i V+ H# {+ G
<meta name="viewport" content="width=device-width, initial-scale=1"># h1 J8 | d4 l6 G
<title>Zero Clipboard Test</title>
7 r! q/ E7 e) B! @; _
</script>
. e. }3 r: }2 v2 X+ C+ b; p
</head>* m& i; ]4 i& ^) ?. X# L. s
<body>1 X. K7 N! A/ \6 [4 [% X
<script type="text/javascript"> 0 Q' |. E' l# I6 r! R
function jsCopy(){ 8 G; ^2 a& _- f7 m- g% L) I( R/ a/ ?
var e=document.getElementById("contents");//对象是contents
% @& @# x$ m }. R' W9 H
e.select(); //选择对象
3 k' G8 c9 B# Q
tag=document.execCommand("Copy"); //执行浏览器复制命令 Y4 V% a' o# V# f# B
if(tag){
7 S. j' \4 S1 L2 e
alert('复制内容成功');
6 G, G0 `3 C! X7 }# D
}
/ M- e# w# c6 J7 Y$ p5 |" E
} 2 k3 |/ I) u; p" a
2 j5 x' h. J8 C6 [
</script> 6 s1 i6 n+ e C9 O+ W# }8 \" T9 D3 C
<textarea id="contents" cols="40" rows="5"></textarea>
9 i( {; K( ^; l1 ]6 v9 d; S5 u4 ^
<br />& G- q% J/ C3 V" m; [8 I G
<input type="button" onClick="jsCopy();" value="复制" /># p0 q* L* F" t5 ^7 [ I E0 B
</body>5 }! |- H: b# ?5 V" @
</html>
2 O" A) S- \" ]4 n+ P

复制代码

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

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

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