点击按钮复制到剪贴板 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>
1 @2 [& W0 f2 J, }, K4 a2 o( U0 N
<html lang="en">0 k7 g- o5 h; Y* [
<head>( O9 b$ B3 d! v2 T! ~
<meta charset="UTF-8">
- j# J! a3 v' b4 P/ p7 W
<meta name="viewport" content="width=device-width, initial-scale=1">
; e, ]/ ]8 b& a2 i7 c5 m
<title>Document</title>3 D. _4 x7 n" V2 _. L
</head>
o# t7 t' y: {. z5 t4 H3 Z# H
<body>- y0 t% H. E6 A: _( W+ d/ m4 H
<script data-cfhash='f9e31' type="text/javascript">1 _- T8 ^" k+ U0 r- \( c
function jsCopy(){
( Y6 j, Z5 k d u" W- z
var e=document.getElementById("copy-num");//对象是copy-num1. O1 x( y7 X- v y/ e
e.select(); //选择对象
1 Y" B6 J. a9 }8 a3 V4 R- r1 x
document.execCommand("Copy"); //执行浏览器复制命令+ m3 g0 u7 V, V
alert("复制成功");
2 |- S+ R& v! C4 b2 q! p
}
% L" Z+ q8 G( n: P
/* <![CDATA[ */. x* v. m: Z$ b8 M7 U" L
!( L4 X2 S6 t0 X7 P! S" f
function() {
/ I( s' Y4 s) W& S* n
try {
5 T4 ~( J8 ?) s- f3 x7 z; @
var t = "currentScript" in document ? document.currentScript: function() {9 G8 y# e5 Q( t3 l) I/ Z
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]0 g! A Z! I. w
} ();3 J3 _6 \3 v7 M8 \ \0 p5 R* i
if (t && t.previousSibling) {6 R+ H& u0 H3 ^. T4 A
var e, r, n, i, c = t.previousSibling,5 p( o2 I ]6 m4 i
a = c.getAttribute("data-cfemail");
C1 |9 \) u$ p) N/ C
if (a) {
6 @9 e1 g2 a9 k+ }) y! n' }. I* G
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,% i9 _# ^6 W9 ~ U
e += String.fromCharCode(i);
. r5 G0 z( i6 x4 r: K5 Q
e = document.createTextNode(e),9 F0 Q; K7 r/ |2 l) P
c.parentNode.replaceChild(e, c)7 K! ^! [# Q6 x5 S- Q
}2 N: r1 k6 o% P- b( J+ ?0 `, t
t.parentNode.removeChild(t);
}
" C: j) }9 }8 J9 w& Q
} catch(u) {}
1 x4 `; K- n4 R, ?* l
} ()
, k+ J/ H$ V5 s" q$ F. |# R, E
/* ]]> */$ L6 y! j, f2 x
* F: y- H) E* a# s
</script>1 j9 k, U9 R- V# }+ r8 Q7 ^! Y% G
<div class="nav navbar-top-links navbar-right">
$ p* q" c' J5 U/ u9 q
<li>推广链接：</li>
! Q4 F6 D. O6 `8 z, @) M
- m* w! B3 [' z. R$ j
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>
) [" g/ p: `7 B0 d+ q: `
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
, A- Y+ x. V" R8 E1 P2 u9 v
' P: t. i% Z5 [2 k! s
</div>+ }8 e: s) F; R" g3 K
</body>/ z% f5 G- U. i8 J2 D& `3 @1 o7 S
</html>! ]! W' o7 H2 a6 O1 S$ m8 b* T* O

复制代码

案例二：

<html>1 r* f' ~" j8 V( F7 ]" C4 w3 f
<head>
& e# K( m G* O3 l1 A
<meta charset="UTF-8">
: P. B7 d% B ^5 R
<meta name="viewport" content="width=device-width, initial-scale=1">
- e z2 [9 j0 D" s
<title>Zero Clipboard Test</title>
: D$ i' _# h# e' N/ Q
</script>3 k' K: E, J- J, ~$ o
</head>
! p2 j9 [# J' U
<body>' [# F( o# ]: Q# t* ^
<script type="text/javascript">
; c* b# A. T- h& k( D: C
function jsCopy(){
( N3 t" U2 z- ?
var e=document.getElementById("contents");//对象是contents 3 I; T7 Z8 ]% T) F& E# y/ U: u) I
e.select(); //选择对象 ! {& l9 {0 A5 H9 h9 G4 Z1 Z
tag=document.execCommand("Copy"); //执行浏览器复制命令
2 U/ ~6 N" m' _, _, f X
if(tag){
8 Q6 l6 B ]" F" f$ E& W
alert('复制内容成功');
1 B& y/ \8 N" Z$ |
}
- ^4 ^9 n5 z5 m! g& n" p
} , ^! f& ?. X; M1 D$ r0 W
; v% b8 y T/ i$ b& q
</script>
! ^/ t; {# d+ {: C4 K2 E1 [% b
<textarea id="contents" cols="40" rows="5"></textarea>3 p6 {: V6 {: O6 a) @& {* S
<br />6 J y/ [( t) O) x
<input type="button" onClick="jsCopy();" value="复制" />
+ I H4 {# J& ]9 y7 o
</body>; ?3 O3 f) X" J. @
</html>
( b S; X; R& Y3 O# L, b m

复制代码

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

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

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