点击按钮复制文本JS

点击copy按钮,复制文本内容

test.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <style>
 8     .content {
 9         width: 200px;
10         height: 200px;
11         border: 1px solid red;
12         word-break: break-word;
13     }
14     .btn {
15         width: 50px;
16         height: 20px;
17         border: 1px solid blue;
18         text-align: center;
19         background-color: #fff;
20     }
21 </style>
22 <body>
23   <textarea class="content">
24     copycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopycopy
25   </textarea>
26   <button class="btn" onclick="copyText()">copy</button>
27 </body>
28 <script src="test.js"></script>
29 </html>

test.js

1 function copyText() {
2     var text = document.getElementsByClassName('content')[0];
3     text.select(); // 选中需要复制的文本
4     document.execCommand("Copy"); // 浏览器复制命令
5 }

注意:这个方法需要复制的内容必须用textarea标签或者其他有select方法的标签进行包裹,否则无法复制。

猜你喜欢

转载自www.cnblogs.com/ganlu/p/9235426.html