文章目录[隐藏]
请用语音读文章介绍
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"/>
<link
href="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">
<input
type="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">
<input
type="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实现复制文本(复制文本到粘贴板)
本文地址：http://www.shenzhoubaby.com/8934.html，转载请说明来源于：生活常识网
声明：本站部分文章来自网络，如无特殊说明或标注，均为本站原创发布。如若本站内容侵犯了原著者的合法权益，可联系@qq.com进行处理。分享目的仅供大家学习与参考,不代表本站立场。
本文地址：http://www.shenzhoubaby.com/8934.html，转载请说明来源于：生活常识网
声明：本站部分文章来自网络，如无特殊说明或标注，均为本站原创发布。如若本站内容侵犯了原著者的合法权益，可联系@qq.com进行处理。分享目的仅供大家学习与参考,不代表本站立场。
