JavaScript实现一键复制功能

algorain
  2017-02-06 11:05:08 2017-02-06 11:05 Created   2023-05-14 21:39:50 2023-05-14 21:39 Updated      

在网页中有的文本框旁边有个一键复制的按钮，具体是怎么实现的呢，我一般都是使用JavaScript来操作文本框，记住必须是文本框，input标签是不可以的，下面这段代码就是关于调用JavaScript来实现的，有需要的可以根据自己的需求更改，效果图我放在博文最后了，大家可以参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>一键复制功能</title>
</head>
<body>
<script type="text/javascript">
function copyUrl2()
{
var Url2=document.getElementById("biao");
//alert(obj);
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("复制成功，快去贴粘吧。");
}
</script>
<div align="center">
<table border=1 bordercolor=#FFFFFF style="border-collapse: collapse">
    <TR vAlign=top align=center bgcolor=#FFF>
        <TH width=90><input style="width: 100px; height: 25px" type="button"
            onClick="copyUrl2()"
            value="点击即可复制" /><br>
        </TH>
    </TR>
    <TR vAlign=top align=center bgcolor=#F1F1FD>
        <TD><textarea cols="10" rows="5" id="biao">这里是要复制的内容，你也可以在文本框里直接输入</textarea>
        </TD>
    </TR>
</TABLE>
</div>
</body>
</html>



  • Title: JavaScript实现一键复制功能
  • Author: algorain
  • Created at: 2017-02-06 11:05:08
  • Updated at: 2023-05-14 21:39:50
  • Link: http://www.rain1024.com/2017/02/06/javascript-article29/
  • License: This work is licensed under CC BY-NC-SA 4.0.
 Comments
On this page
JavaScript实现一键复制功能
  1. 在网页中有的文本框旁边有个一键复制的按钮，具体是怎么实现的呢，我一般都是使用JavaScript来操作文本框，记住必须是文本框，input标签是不可以的，下面这段代码就是关于调用JavaScript来实现的，有需要的可以根据自己的需求更改，效果图我放在博文最后了，大家可以参考。