网页点击button进行复制文本实现

最近业务有这个需求于是就在网上找了下结果没找到后来发现自己的项目有前辈写好的就拿过来试了下还真的管用现在就把代码粘贴出来需要的小伙伴可以参考下

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

首先引入这个没有的小伙伴可以下载官方网站

<script src="plugins/clipboard/clipboard.min.js"></script>

引入js之后再来讲解下

clipboard复印内容的方式有
- 从target复印目标内容
- 通过function 要复印的内容
- 通过属性返回复印的内容

可以从input、textare、div中通过copy/cut获取内容目标内容，其HTML的代码如下

input
data-clipboard-target指向复印节点，这里指input的目标id
data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是copy。cut只能在input和textare中起作用

<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

textare
和上面的主要区别只是input和textare不同

<textarea id="bar">hello</textarea> 
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>

div
和上面的主要区别只是input和div不同

<div>hello_div</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

以上的插件的初始化JS代码都是相同：

   <script>
       // button的class的值
        var clipboard = new Clipboard('.btn');//这个地方可以写你的class  或者#id..
        clipboard.on('success', function(e) {
            console.log(e);
        });
 
        clipboard.on('error', function(e) {
            console.log(e);
        });
    </script>

ok大概就是这个样子把把我的代码截图发上来

 var clipboard = new Clipboard("#copybtn");//实例化
		    
		    //复制成功执行的回调，可选
		    clipboard.on('success', function(e) {
		    	hideOperation($(e.trigger).parent().parent().parent().parent()[0]);
		        console.log(e);
		    });

html：

<c:if test="${var.express_number!=null && var.express_number!=''}">		
<button	class="btn btn-warning" id="copybtn" data-clipboard-text="${var.express_number}">复制</button>
</c:if>

网页点击button进行复制文本实现

猜你喜欢