点击按钮复制到剪贴板 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>' Z- ^0 ]* @: n* e- ?! B& N
<html lang="en">
! J7 c/ w* `, T9 A$ j t) |
<head>
% D1 Y0 Q1 B/ L" J
<meta charset="UTF-8">( h: i0 h' z: C. t* a2 A2 V
<meta name="viewport" content="width=device-width, initial-scale=1">
4 x* l, b' F3 `
<title>Document</title>* f1 J, l2 M9 m
</head>& i% @8 J- x+ u" B O' A* J6 d
<body>
$ F5 o/ q7 C; P* ~% A, h Q
<script data-cfhash='f9e31' type="text/javascript">
0 C$ R5 {9 Z7 n3 M2 x
function jsCopy(){
+ G) B; M' l' ^$ i" `
var e=document.getElementById("copy-num");//对象是copy-num1
9 W i2 }8 K+ R7 d' ]
e.select(); //选择对象9 k @4 a7 {4 |# h) {
document.execCommand("Copy"); //执行浏览器复制命令+ [& M6 M/ v) W" c; y0 ?5 C4 H8 l
alert("复制成功");: ^2 k# j* r* Z% A X
}, C( ?, n% c6 F' s r' s! @
/* <![CDATA[ */ e# Z( o& I7 Q
!
; z" ^9 ?$ N2 h+ \& L2 h* P: |$ e
function() {
' J0 j! ]& {* i& B) a
try {
I3 T2 X9 z7 P8 i
var t = "currentScript" in document ? document.currentScript: function() {
, p; `- w, ?- }1 M$ @9 b8 r
for (var t = document.getElementsByTagName("script"), e = t.length; e--;) if (t[e].getAttribute("data-cfhash")) return t[e]
' W, K* s1 n- H4 Y( _# \ }+ x
} ();
1 ]# J! y( _5 D* J$ E3 n4 I4 Y
if (t && t.previousSibling) { {$ V& D3 b( g; I
var e, r, n, i, c = t.previousSibling,
3 y1 q0 B* F3 [7 ~6 x1 z
a = c.getAttribute("data-cfemail");9 U4 p+ L' K. B# t9 o
if (a) {
$ v6 ~/ s- w' B; n3 X
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 A5 f" M( N2 g3 K+ o# ]
e += String.fromCharCode(i);) Z) S5 ~3 s6 C! }8 J
e = document.createTextNode(e),
! H$ v% p' \# `- [' [) p! k3 V
c.parentNode.replaceChild(e, c)
7 j3 z# ^( H9 j4 A
}9 N7 \7 T2 }* A g) I& c4 ]
t.parentNode.removeChild(t);
9 G7 l) ?/ U7 u( O0 K9 X; }
}& d; y' e( i! i$ L: r4 T6 E
} catch(u) {}) G/ L$ h, x: y/ T; r
} (); o* k" L4 ^7 Y5 h/ x- n, y
/* ]]> */2 w% O! w+ R+ E# {/ n6 W2 h
0 ]6 g( G# k& q6 O, W
</script>
5 Z- I8 |5 r: `5 u
<div class="nav navbar-top-links navbar-right">( g" k9 q3 a; X) \/ i+ W! |
<li>推广链接：</li>
) P t X" i# |: }# s6 R4 O3 S
3 O; v+ w! p6 f# ~
<li><input id="copy-num" class="form-control" type="text" value="" style="max-width:100px;display:inline-block;color: #999; margin-top:12px"></li>
, A: z( ^- s# u/ t
<li><button onClick="jsCopy()" type="button" class="btn btn-sm">复制</button></li>8 R: _: G; ^& e
! {* A& C6 ~% H$ N, H! e V- }
</div>: |1 x/ U' g8 F; J' ?0 O; b3 c* D
</body>4 y4 G2 h/ `' T' A( Q& z
</html>
9 j$ H. \! f7 g6 |0 R% P; f, H

复制代码

案例二：

<html>
' x D) q1 E2 U# {2 n
<head>
7 k4 o) f& X$ r5 N0 L2 `
<meta charset="UTF-8">0 f1 D. L, T: a9 G: [) G' o2 P
<meta name="viewport" content="width=device-width, initial-scale=1">2 }' V% z* S9 {9 j
<title>Zero Clipboard Test</title>
, `$ `5 M' N. H
</script>( K; L8 E- {3 G
</head>
1 D' x. w* x) Z3 d6 R) \
<body>
2 |7 E! E3 L; g: M: g# j+ ]4 K( _
<script type="text/javascript">
0 O B. y! @: y- C
function jsCopy(){
2 t, Y3 u5 y% G# S% m
var e=document.getElementById("contents");//对象是contents & D+ ^- U3 I. p6 F9 c i4 O' m
e.select(); //选择对象 $ M ^0 `1 e% ?6 K4 l0 N+ Y( s
tag=document.execCommand("Copy"); //执行浏览器复制命令! g1 w. a% D0 o7 R4 r* O0 s8 d& s, h
if(tag){
& j" F8 W i$ n
alert('复制内容成功');9 x3 k4 M8 y: ~1 Z
}
4 C Y9 V$ @/ M% R( Q# g- O
}
* Z$ w8 Y! v/ Y
- O- @$ k _) ^: x, l! k
</script> 0 k9 K8 A0 @( x( I6 @0 h1 ?
<textarea id="contents" cols="40" rows="5"></textarea>
7 ?5 H, L: t$ ^1 \
<br />9 ^0 t" |$ b4 n4 g3 ]
<input type="button" onClick="jsCopy();" value="复制" />
* e% R( B, }3 o% p" P/ E
</body>: S# Y6 ?! u5 B8 ?
</html>9 s: \" Y( D0 ]* {. \( P% G( x

复制代码

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

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

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