clipboard插件可以方便的将组件中的文本(或者是其他目标文本)复制到剪贴板上。我们可以在下面的网址获得到:
https://www.bootcdn.cn/clipboard.js/
api: https://www.bootcdn.cn/clipboard.js/readme/
首先说一个遇到的问题。新版本中的构造函数是clipboardJS(),而不是clipboard()。因此在构造对象时,若遇到了下图的错误(非法构造器),则是构造方法写错了。
一、简单的demo
1. 引入clipboard.min.js
<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
2.编辑组件
<div id="phone" class="tel" data-clipboard-text="" >
电话号码是:17788889999
</div>
3.编辑js
<script type="text/javascript">
//id选择器:"#id";class选择器:".tel";
var clipboard=new ClipboardJS("#phone");
clipboard.on('success', function(e) {
console.info('text',e.text);
});
$("#phone").attr({
"data-clipboard-text": "17788889999"
});
</script>
4.展示效果
点击文字后
扫描二维码关注公众号,回复:
3926814 查看本文章
二、使用详解
1. 从指定的目标源赋值文本
data-clipboard-target:指向复印节点。可以使用id选择器(#id)、标签选择器(div)等。
data-clipboard-action:该属性不指定,则默认值是copy;可以指定为cut。cut只能在input和textare标签中起作用。
<!-- eg1: -->
<input id="foo" type="text" value="hello" />
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button>
<!-- eg2: -->
<textarea id="bar">hello</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击复制</button>
<!-- eg3: -->
<div>hello_div</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">点击复制</button>
//js可以供以上三个例子使用:
<script>
// 这里使用的是button的class的值。也可以使用id值(#id)
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action); //copy或者cut操作
console.info('Text:', e.text); //复制的文本内容
console.info('Trigger:', e.trigger); //触发的元素
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
2.通过函数指定要复制的文本
下面四个例子分别对应四个不同的复制方法
<!-- eg1:复制target函数指定的结点内容 -->
<button class="btn">点击复制</button>
<div>这里是被复制的内容</div>
<script>
var clipboard = new ClipboardJS('.btn', {
//通过target指定要复印的节点
target: function() {
return document.querySelector('div');
}
});
clipboard.on('success', function(e) {
console.info("复制的内容",e.text);
});
clipboard.on('error', function(e) {
console.error("e",e);
});
</script>
<!-- eg2:复制text函数的返回值内容 -->
<button id="btn">点击复制</button>
<script>
var clipboard = new ClipboardJS('#btn', {
// 点击按钮,直接复制text函数的返回值
text: function() {
return '这里是被复制的文本内容';
}
});
clipboard.on('success', function(e) {
console.info("复制的内容",e.text);
});
clipboard.on('error', function(e) {
console.error("e",e);
});
</script>
<!-- eg3:通过指定的节点对象,传参给Clipboard。复制data-clipboard-text中的内容 -->
<div id="btn" data-clipboard-text="这里是被复制的内容">
<span>点击复制</span>
</div>
<script>
/*var btn = document.getElementById('#btn');
var clipboard = new ClipboardJS(btn);*/
var clipboard = new ClipboardJS("#btn");
clipboard.on('success', function(e) {
console.info("复制的内容",e.text);
});
clipboard.on('error', function(e) {
console.error("e",e);
});
</script>
<!-- eg4:复制多个dom结点中指定的文本内容 -->
<button class="button" data-clipboard-text="这里是被复制的文本内容1">无论点击哪一个按钮都复制三个按钮中属性指定的文本内容1</button>
<button class="button" data-clipboard-text="这里是被复制的文本内容2">无论点击哪一个按钮都复制三个按钮中属性指定的文本内容2</button>
<button class="button" data-clipboard-text="这里是被复制的文本内容3">无论点击哪一个按钮都复制三个按钮中属性指定的文本内容3</button>
<script>
/**
//通过标签结点构造对象
var btns = document.querySelectorAll('button');
var clipboard = new Clipboard(btns);
*/
//通过类名构造对象
var clipboard = new Clipboard(".button");
clipboard.on('success', function(e) {
console.info("e",e);
});
clipboard.on('error', function(e) {
console.error("e",e);
});
</script>