网页点击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进行复制文本实现相关推荐

javascript点击按钮，复制文本
let oInput = document.createElement('input'); oInput.value = "复制文本"; document.body.appendC ...
点击按钮复制链接（实现点击按钮，复制文本框中的的内容）
想要的效果是,点击复制链接的按钮,然后就把事先准备好的链接复制上,然后crtr+v就能黏贴出来我实在react的项目中使用的 // 复制链接方法 copyUrl() {let inputText = ...
如何实现复制文本到剪贴板？
效果展示: 前置准备: 添加触发复制的按钮添加被复制的文本步骤分解: 创建成功提示触发器选中复制文本按钮点击检查器标签点击触发器标签创建触发器配置成功提示触发器触发时机-无触发行为-弹 ...
点击按钮复制文本框内容
点击按钮复制文本框内容复制文本框内容的方法如下: function Copy(){var e=document.getElementById("content");//对象是co ...
vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
js点击复制文本 - 案例篇
文章目录 js点击复制文本 :代码+效果图效果图 · 示下: html 代码如下: 注意代码: 附:[javascript监听键盘事件 - 如表单enter回车提交](https://blog.cs ...
js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容,原以为差不多,结果发现根本行不通尝试了各种办法,最后使了个障眼法,实现了下面的效果一.原理 ...
网页复制内容修改（解决复制文本多空格问题，带标注信息（如版权信息））
前言适用需求平时在使用网页复制文本的时候(双击三击或选中复制),有时候会多复制一个或几个空格(常见于换行),在某些有格式要求的时候就很麻烦,因为看不出来有空格或换行在复制网页信息的时候希望能够带 ...
遇到网页无法复制文本怎么办，程序员来教你一键解锁，不需要任何软件和插件
本篇文章主要讲解网页禁用js,复制文本的方法教程日期:2021年12月5日作者:任聪聪步骤一.打开开发者工具,按F12按钮,笔记本按住FNLK+F12 步骤二.找到设置 setting 点击它 ...

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

网页点击button进行复制文本实现相关推荐

最新文章

热门文章