前端页面复制粘贴插件Clipboard的使用

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中

1、引入JS文件：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

2、HTML代码

<input name="content" id="content" value="这里是需要复制的内容">
<button class="btn btn-sm btn-purple" id="copybtn" data-clipboard-action="copy" data-clipboard-target="#content">复制</button>

3、JS代码初始化插件

<script>var clipboard = new ClipboardJS('#copybtn');clipboard.on('success', function(e) {alert('复制成功');});clipboard.on('error', function(e) {alert('复制失败');});</script>

前端页面复制粘贴插件Clipboard的使用相关推荐

前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
前言作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...
前端复制粘贴navigator.clipboard失效的问题
由于地址访问的安全策略,不安全的http,不是https的地址在部署后,出现失效的问题,此时采用两种策略,分别对安全和不安全的采用两种粘贴方法,ts方法代码如下,此方法采用一篇博客所写 // Type ...
前端页面加水印插件_没用过这7款浏览器插件，你一定是假的程序员
谷歌Chrome浏览器,几乎是每个程序员必备的浏览器,除了速度快之外,还有非常丰富的插件可以使用,今天我们来细数程序员最常用的7大插件,可以极大地提升你的效率. 1.AdBlock,必备神器,全球超过 ...
前端页面添加音乐插件
1.Aplayer搭配Metingjs音乐插件的使用 Aplayer和MetingJ的介绍 Aplayer官网文档:https://aplayer.js.org/#/ Metingjs官网文档:htt ...
每次新增页面复制粘贴？100多行源码的 element-ui 的新增组件功能教你解愁
1. 前言大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.已进行三个月了,很多小伙伴表示收获颇丰. 想学源 ...
pc/mobile前端一键复制粘贴
官网地址 <script type="text/javascript" src="js/clipboard.min.js"></script& ...
js复制文本插件Clipboard
<buttonclass="copy-btn cobyOrderSn"data-clipboard-action="copy":data-clipboar ...
前端页面使用ace插件优化脚本
html页面:<pre id="editor" style="width: 100%;height: 800px;"></pre>(注: ...
JavaScript 中的复制粘贴操作
在日常业务开发,比如复制后增加版权信息,点击复制,等场景中需要进行复制粘贴的操作,以下是几种实现方案. Clipboard API Clipboard API 提供了响应剪贴板命令(剪切.复制和粘贴) ...

前端页面复制粘贴插件Clipboard的使用

前端页面复制粘贴插件Clipboard的使用相关推荐

最新文章

热门文章