JS pc端和移动端共同实现复制到剪贴板功能实现
JS pc端和移动端实现复制到剪贴板功能实现
在网页上复制文本到剪切板，一般是使用JS+Flash结合的方法，网上有很多相关文章介绍。随着 HTML5 技术的发展，Flash 已经在很多场合不适用了，甚至被屏蔽。本文介绍的一款JS插件，实现了纯JS方法复制文本到剪切板。
插件名是Clipboard.js，该插件不依赖 Flash，而是依赖于最新HTML5推出 Selection API 和 execCommand API。
Github：
https://github.com/zenorocha/clipboard.js
可以通过npm方式安装：
npm install clipboard --save
首先需要在页面引入：
<script src="dist/clipboard.min.js"></script>
下面直接上html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制功能实现</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">
<script src ="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</head>
<body>
<input class="foo" value="这里是内容">
<span class="fdd">阿斯顿发斯蒂芬阿斯蒂芬</span>
<button class="btn" data-clipboard-target=".foo">点击复制</button>
<button class="btn" data-clipboard-target=".fdd">点击复制</button>
<script src ="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
alert("复制成功!");
e.clearSelection();
});
clipboard.on('error', function(e) {
alert("复制失败!");
});
</script> </body>
</html>
参考地址:
https://www.cnblogs.com/52fhy/p/5383813.html
JS pc端和移动端共同实现复制到剪贴板功能实现的更多相关文章
- 【原】js实现复制到剪贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【转】js实现复制到剪贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【转】js插件zClip实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...
- js插件zClip实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...
- 纯js实现复制到剪贴板功能
在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...
- js/jQuery实现复制到剪贴板功能，兼容所有浏览器
因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...
- js实现复制到剪贴板功能，兼容所有浏览器
http://www.cnblogs.com/PeunZhang/p/3324727.html https://github.com/zeroclipboard/ZeroClipboard 复制链接到 ...
- JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
随机推荐
- Flutter——Drawer、DrawerHeader、UserAccountsDrawerHeader组件（侧边栏组件）
在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显示侧边栏,也可以通过点击按钮显示侧边栏. ...
- csdr Makefile for openwrt（纯粹笔记，暂未成功）
1.自已学着写的Makefile给csdr在openwrt平台上使用 参照:https://blog.csdn.net/lvshaorong/article/details/54668220 incl ...
- Chkdsk /f 修复无法识别EXFAT卷文件系统
Chkdsk 工具将错误地报告为损坏的 Windows 7 和 Windows Server 2008 R2 中 exFAT 卷文件系统 适用于: Windows Server 2008 R2 Ser ...
- PS批量制作获奖证书并导出PNG
其实方法和"使用PS批量制作视频字幕"的方法类似.区别在于制作视频字幕时导出成psd格式就可以直接导入Premiere中使用了,而获奖证书考虑到打印设备有无PS的不确定性,可能需要 ...
- IDEA类的旁边有个对勾
说明该类添加到IDEA的书签栏去了,在IDEA左侧下方有个Favorites选项,在这里的BookMarks中可以看到这个类. 取消方法: 选中这个类,按F11即可取消
- jade变量声明和数据传递
声明一个变量 - var course = 'jade'; 取得一个变量 #{course} 大括号里面写入变量命,前面加个#号就可以取得变量 在括号里面可以进行诸多都运行操作,比如大小写 #{cou ...
- 剑指Offer（三十）：连续子数组的最大和
.# 剑指Offer(三十):连续子数组的最大和 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net ...
- vim快捷操作记录
1. ctrl+v 去选中代码块,按下=号,代码块对齐 命令行模式下 输入:1,16 left会左对齐
- js rsa sign使用笔记(加密,解密,签名,验签)
你将会收获: js如何加密, 解密 js如何签名, 验签 js和Java交互如何相互解密, 验签(重点) 通过谷歌, 发现jsrsasign库使用者较多. 查看api发现这个库功能很健全. 本文使用方 ...
- 前端实现在线预览pdf、docx、xls、ppt等文件
思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...