H5复制粘贴双端适配的解决方案(终极版)
2024-08-31 18:14:45
前言
最终适配所有机型的方案基于clipboardjs
官网https://clipboardjs.com/
这个库由几个不同的CDN提供商托管。选择你最喜欢的:)
jsDelivr
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
cdnjs
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
RawGit
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>
unpkg
<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>
HTML部分按照clipboard提供的API进行编写
<input readonly="readonly" type="text" value="414" class="code"/>
<button class="btn" data-clipboard-action="copy" data-clipboard-target=".code">复制</button>
JS
//复制
$('.btn').on('click', function(){
//这部分使用原生的复制方法
$('.code').select();
document.execCommand("copy",false,null);
//这部分使用clipboardjs提供的复制方法
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
e.clearSelection();
});
alert('复制成功。');
//clipboardjs提供的复制失败的方法,进行复制失败提示
clipboard.on('error', function(e) {
alert('复制失败,请手动选择复制。');
});
})
segmentfault上其他相关分享
使用clipboard实现前端页面复制到粘贴板的功能
Vue中配合clipboard.js实现点击按钮复制内容到剪切板
最新文章
- Linux VMware 克隆后无法启动eth0网卡
- [问题解决]《GPU高性能编程CUDA实战》中第4章Julia实例“显示器驱动已停止响应,并且已恢复”问题的解决方法
- [译]Bundling and Minification
- CreateProcessAsUser,C#写的windows服务弹框提示消息或者启动子进程
- yum的使用及配置
- python3.x随手笔记1
- Ansible的条件语句
- Python 命令行参数解析
- openStack工具集
- 【转】linux环境变量设置
- ASP.NET实现图片防盗链(转)
- 关于写的Java书籍进展
- 改变status bar的状态
- 关于wind7重新安装系统后,连接mysql的问题
- CodeForces 620A Professor GukiZ&#39;s Robot
- win10用命令net启动服务没权限解决办法
- MySQL 从库down机
- MySQL——索引基础
- Base64与MD5的区别
- Android JS interaction
热门文章
- docker学习笔记(1)——ubuntu16.04安装docker(含如何彻底卸载docker,docker拉取镜像失败解决)
- Ajax 实战(一)
- 【FAQ】接入HMS Core推送服务过程中一些常见问题总结
- tp5 (自写) 实现redis消息队列 + 排行榜
- MySQL 8.0无法通过Navicat远程连接 1045 - Access denied for user &#39;root&#39;@&#39;::1&#39; (using password: YES) 的解决办法
- OCCT基础
- ElasticSearch7.3 学习之Mapping核心数据类型及dynamic mapping
- ## [湖南省赛2019]Findme ###
- BBS项目补充知识(后台文章展示功能)
- python基础之序列类型的方法——字符串方法