介绍

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

安装

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

npm install clipboard –save

2.引入js

<script src=”dist/clipboard.min.js”></script>

//官网提供了下载地址。也可以使用免费的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="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"rel="stylesheet"/></head><body><divclass="input-group"style="width:600px;margin:200px"><inputtype="text"class="form-control"id="foo"value="https://github.com/zenorocha/clipboard.js.git"placeholder="Amount"/><divclass="btninput-group-addon"data-clipboard-target="#foo">复制</div></div><scriptsrc="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script><script>newClipboardJS(".btn");</script></body></html>

如图书最简单的例子。单机复制按钮即可自动复制文本框的内容

换成下面就会变成剪切。主要是以下属性

data-clipboard-action=”cut”

<divclass="input-group"style="width:600px;margin:200px"><inputtype="text"class="form-control"id="foo"value="https://github.com/zenorocha/clipboard.js.git"placeholder="Amount"/><divclass="btninput-group-addon"data-clipboard-target="#foo"data-clipboard-action="cut">剪切</div></div><scriptsrc="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script><script>newClipboardJS(".btn");</script>

剪切操作仅适用于<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');}});

要在Bootstrap Modals中使用或与任何其他更改焦点的库一起使用。您需要将focus元素设置为container值

newClipboardJS('.btn',{container:document.getElementById('modal')});

更好的管理单页面的DOM生命周期

varclipboard=newClipboardJS('.btn');clipboard.destroy();

兼容性

备注

如果需要支持更低版本的浏览器。可以参考官网的介绍。它能够优雅的降级

提供Chrome和Firefox的扩展

一个浏览器扩展。为GitHub。MDN。Gist。StackOverflow。StackExchange。npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。

您还感兴趣的文章推荐

以上就是由互联网推广工程师网创网整理编辑的，如果觉得有帮助欢迎收藏转发~

本文标题：js实现复制文本 js脚本编写教程
本文地址：https://www.wangchuang8.com/80190.html，转载请说明来源于：网创推广网
声明：本站部分文章来自网络，如无特殊说明或标注，均为本站原创发布。如若本站内容侵犯了原著者的合法权益，可联系进行处理。分享目的仅供大家学习与参考,不代表本站立场。