js实现复制功能 js点击复制文本

介绍

clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且它没有任何非常复杂的配置，这也是它存在的原因。

安装

通过npm安装（或者直接下载js文件引入）

【js实现复制功能 js点击复制文本】npm install clipboard –save

2.引入js

<script src=https://www.yf-zs.com/shenghuo/”dist/clipboard.min.js”>
//官网提供了下载地址，也可以使用免费的cdn

使用示例
<!DOCTYPE html><html class="no-js"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="input-group" style="width: 600px;margin:200px"> <input type="text" class="form-control" id="foo" value="https://github.com/zenorocha/clipboard.js.git" placeholder="Amount" /> <div class="btn input-group-addon" data-clipboard-target="#foo">复制</div> </div> <script src="http://pic.caodingtushuguan.com/221011/2015034128-0.jpg"></script> <script> new ClipboardJS(".btn"); </script> </body></html>

文章插图

文章插图
备注如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级
提供Chrome和Firefox的扩展一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。