点击按钮复制到剪贴板 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) J* S* v" l q1 m
<html lang="en">5 { p; T0 C* R3 A# |# B& q
<head>; u9 U4 m3 V! ?' [' J! U9 ~! g
<meta charset="UTF-8">$ Q! I9 {7 M/ r- L
<meta name="viewport" content="width=device-width, initial-scale=1">9 O% Z8 l( |( M* g
<title>Document</title>2 e2 j1 ^4 Q+ N6 _* U( ?
</head>7 I8 N" u% z5 |. }
<body>
; u6 K$ c) D' p6 P' ^
<script data-cfhash='f9e31' type="text/javascript">1 B5 O, y* i5 j4 r
function jsCopy(){/ n% [9 v4 t% R( G7 u- G# [
var e=document.getElementById("copy-num");//对象是copy-num1
. Q. L& _: L% K0 v# H1 P
e.select(); //选择对象
0 \. x; q. b# E1 |, ~3 e6 Q1 n
document.execCommand("Copy"); //执行浏览器复制命令) Y; Z: V/ J" T3 S
alert("复制成功"); |/ O: P7 D0 D+ `
}
0 S I) e5 @% v8 L, H7 N- w
/* <![CDATA[ */' D, Q" C: m, G4 l; g
!
7 {* L2 }6 ~$ r! V0 B, y/ f \
function() { @& l7 ?0 y* P; O( v3 l; C* c
try {& d9 s2 Z% A8 h) U7 F7 X; g
var t = "currentScript" in document ? document.currentScript: function() {$ {& v# e3 l+ h
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]
$ b) \1 W/ m- C% ~, D- p
} ();0 P5 C ~2 g8 i
if (t && t.previousSibling) {
, M' u7 e) g; u" X" u! [ `. }" C
var e, r, n, i, c = t.previousSibling,
/ q; C! @& Y# h1 @0 H5 E# `0 q
a = c.getAttribute("data-cfemail");1 B% I( l" K4 U$ d) \
if (a) {
# W( ^4 p, H H; d! \
for (e = "", r = parseInt(a.substr(0, 2), 16), n = 2; a.length - n; n += 2) i = parseInt(a.substr(n, 2), 16) ^ r,6 E$ c% A Q C, Z& J
e += String.fromCharCode(i);2 m J6 N( t$ T
e = document.createTextNode(e),( g& q9 E: ~# @4 Q
c.parentNode.replaceChild(e, c)/ }7 c7 m, F1 @6 u& ^
}; t/ i7 _& B) a$ H; a
t.parentNode.removeChild(t);
) k7 P3 W, K. @. E# l* l1 F: U
}
# x* z; f( t+ {) S; G9 L4 s; e
} catch(u) {}9 B" y# \1 p3 m" d0 w6 o
} ()
% I2 G) e" T m& F; t
/* ]]> */
# E0 p0 ?# z* n
6 S0 F% `* j5 L
</script>1 b0 U/ R3 S/ ?
<div class="nav navbar-top-links navbar-right">
! ]# P7 U8 V, r: {( |
<li>推广链接：</li> E) X, j" U$ c- I0 s1 [
/ c0 r- C2 D0 p' k" g. O" 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>
9 N: A- Z% J8 D# b+ J
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>
$ }' [) n2 Q* L/ v) ^( g( D
; D; J% ?) K! O6 S' ^: d
</div># f' D6 D% O5 L- e
</body> K! s% _+ d" R, k
</html>
3 C: f* @% {- n2 U

复制代码

案例二：

<html>
& i! A8 r, ^2 x! l& w4 f0 y# s
<head>
5 s* e& z3 L" z% l' B# d
<meta charset="UTF-8">9 {( {: Z( g+ C! K4 t# h6 p
<meta name="viewport" content="width=device-width, initial-scale=1">
, }0 \" v! G' d- q6 P
<title>Zero Clipboard Test</title>
5 S, i' Y! @) f! x( o1 P V
</script>. c4 Y( z. i8 e9 Z
</head>4 U9 R w0 J; P( [# R
<body>
1 q, |2 m- N, |9 Q) T
<script type="text/javascript"> , a1 s+ m, j k; I0 N7 v$ I
function jsCopy(){
# n, G1 \# p* L6 s8 P
var e=document.getElementById("contents");//对象是contents
7 Y! i; o. z. t' Z( t
e.select(); //选择对象 - M3 Q. Q3 d2 p3 f" F
tag=document.execCommand("Copy"); //执行浏览器复制命令
: i4 m0 |4 d2 l) o3 }( v9 m
if(tag){/ P2 J! |& }( p2 L, V
alert('复制内容成功');/ v# t6 t: d4 M" I2 M% l. v4 f
}. y1 c* Q* |/ c( [; r: x; H
} , j1 r- f' G+ l3 _6 }
# _: Z: e# y1 v8 l( h( a+ t/ J
</script>
1 e7 ?- V' k4 p" ~( l- F! G
<textarea id="contents" cols="40" rows="5"></textarea>
, D: ^+ w* [8 ?2 E0 R) U+ x
<br />9 p2 N2 ~3 _; ^+ X) m) m# ^& r3 I `
<input type="button" onClick="jsCopy();" value="复制" />
9 A; ]6 p2 {+ J* B0 ?) k7 K5 R4 k
</body>, g. ]" [, [9 n
</html>
/ d' j: z6 R2 d6 O

复制代码

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

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

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