首页 > 代码库 > clipboard.js在剪切中的使用
clipboard.js在剪切中的使用
目前只是对文字的复制。
下面的代码解释:
1.html
需要添加data-clipboard="copy"和data-clipboard-target="对象选择器"的属性。
其中data-clipboard-target表示复制的目标,用选择的形式表示,包括类选择器,id选择器,元素选择器等。
<section> <p id="qq1">123456789</p> <input type="button" class="copy1" style="background-color:#e1cbcb;color:red;" data-clipboard-action="copy" data-clipboard-target="#qq1" value="http://www.mamicode.com/复制" /> <p>农村淘宝商家合作群:</p> <p id="qq2">12345678900</p> <input type="button" class="copy2" style="background-color:#e1cbcb;color:red;" data-clipboard-action="copy" data-clipboard-target="#qq2" value="http://www.mamicode.com/复制" /> </section>
2.javascript
a.需要引入clipboard.js,代码路径视自己的项目而定。
b.实例化Clipboard,需要传入按钮的选择器,即通过什么动作实现剪切。
c.可以注册剪切成功和失败的事件,形式为clipboard.on("success 或者error",function(e) {});
<script src="http://www.mamicode.com/Scripts/clipboard.min.js"></script> <script> $(function () { var clipboard1 = new Clipboard(".copy1"); //clipboard1.on(‘success‘, function (e) { // alert(); //}); //clipboard1.on(‘error‘, function (e) { // console.log(e); //}); }); </script>
3.测试
剪切成功,被复制的文本状态如下图所示。
clipboard.js在剪切中的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。