前端页面复制粘贴插件Clipboard的使用
程序员文章站
2022-05-14 22:20:35
...
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复制剪切插件的使用
-
在Bootstrap开发框架的前端视图中使用@RenderPage实现页面内容模块化的隔离,减少复杂度
-
使用Fullpage插件快速开发整屏翻页的页面
-
使用swiper插件,全屏翻页时,某一页的页面长度超过900px,嵌套问题解决
-
前端开发vscode中比较使用的插件工具分享
-
WordPres对前端页面调试时的两个PHP函数使用小技巧
-
前端使用正则表达式获取地址栏URL参数的值并将需要的参数值展示在页面
-
WordPres对前端页面调试时的两个PHP函数使用小技巧_PHP
-
前端常用编辑器Sublime Text3 用法及常用插件的安装使用(包含MarkDown语法及插件)
-
前端页面点击图片放大功能(viewerjs插件的简单而强大)