繁荣网

  1. 首页 > 生活经验 > >

复制文本到粘贴板 js实现复制文本

生活百科

介绍

clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件 。并且它没有任何非常复杂的配置 。这也是它存在的原因 。
安装
  1. 通过npm安装（或者直接下载js文件引入）
【复制文本到粘贴板 js实现复制文本】npm install clipboard –save
2.引入js
<script src=http://www.shenzhoubaby.com/”dist/clipboard.min.js”>
//官网提供了下载地址 。也可以使用免费的cdn
使用示例
<!DOCTYPEhtml><htmlclass="no-js"><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><title></title><metaname="description"content=""/><metaname="viewport"content="width=device-width,initial-scale=1"/><linkhref=http://www.shenzhoubaby.com/"https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"rel="stylesheet"/>复制

复制文本到粘贴板 js实现复制文本

文章插图

复制文本到粘贴板 js实现复制文本

文章插图
如图书最简单的例子 。单机复制按钮即可自动复制文本框的内容
换成下面就会变成剪切 。主要是以下属性
data-clipboard-action=”cut”
<divclass="input-group"style="width:600px;margin:200px"><inputtype="text"class="form-control"id="foo"value=http://www.shenzhoubaby.com/"https://github.com/zenorocha/clipboard.js.git"placeholder="Amount"/>剪切

剪切操作仅适用于<input>或<textarea>元素
或者这样 。直接复制 data-clipboard-text属性的内容
<buttonclass="btn"data-clipboard-text="要复制的内容">复制</button>
事件监听 。可以打开控制台自行尝试varclipboard=newClipboardJS('.btn');clipboard.on('success',function(e){console.info('Action:',e.action);console.info('Text:',e.text);console.info('Trigger:',e.trigger);e.clearSelection();});clipboard.on('error',function(e){console.error('Action:',e.action);console.error('Trigger:',e.trigger);});
高级用法newClipboardJS('.btn',{target:function(trigger){returntrigger.nextElementSibling;}});
newClipboardJS('.btn',{text:function(trigger){returntrigger.getAttribute('aria-label');}});
newClipboardJS('.btn',{container:document.getElementById('modal')});
varclipboard=newClipboardJS('.btn');clipboard.destroy();
兼容性
复制文本到粘贴板 js实现复制文本

文章插图

复制文本到粘贴板 js实现复制文本

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


上一篇：阿里员工炫耀 p7员工

下一篇：盘点世界上十大古老鱼 世界十大古老鱼类