H5复制粘贴双端适配的解决方案(终极版)
前言
最终适配所有机型的方案基于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实现点击按钮复制内容到剪切板
H5复制粘贴双端适配的解决方案(终极版)的更多相关文章
- H5复制粘贴
H5 复制粘贴 - execCommand 字数748 阅读399 评论0 喜欢0 需求:自动复制一段内容到剪切板, 让用户可以在其他客户端粘贴(发小广告做推广经常要用吧) window.clipbo ...
- Vim中复制粘贴缩进错乱问题的解决方案
Vim中复制粘贴缩进错乱问题的解决方案 当你把这段缩进优美的代码直接ctrl+c,ctrl+v到Vim的时候,就会出现如下恶心的情况 可以看到,这种直接粘贴的方式会导致代码丢失和缩进错乱等情况. 解决 ...
- H5 APP 页面移动端适配方案
H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...
- h5复制粘贴板,打开APP功能
<div class="container"> <img src="../themes/mall/img/i_red_ad4.jpg"> ...
- 关于Entity Framework中的Attached报错的完美解决方案终极版
之前发表过一篇文章题为<关于Entity Framework中的Attached报错的完美解决方案>,那篇文章确实能解决单个实体在进行更新.删除时Attached的报错,注意我这里说的单个 ...
- vue init失败解决方案-终极版
//由于windows系统的某方面问题,vue脚手架安装可能会出现第一证书丢失 // 报错:vue-cli · Failed to download repo vuejs-templates/webp ...
- 超详细讲解H5移动端适配
前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 整理h5移动端适配方案
<使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...
随机推荐
- LeetCode-096-不同的二叉搜索树
不同的二叉搜索树 题目描述:给你一个整数 n ,求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种?返回满足题意的二叉搜索树的种数. 二叉搜索树(Binary Search ...
- hive从入门到放弃(一)——初识hive
之前更完了<Kafka从入门到放弃>系列文章,本人决定开新坑--hive从入门到放弃,今天先认识一下hive. 没看过 Kafka 系列的朋友可以点此传送阅读: <Kafka从入门到 ...
- ARP协议、路由器详细工作原理
ARP原理分析 第一次通信时,有对方IP地址但是没有目标MAC地址,该PC就会在网络层启动ARP协议生成一个ARP报文"我叫1.1,我的MAC是AA;谁是1.3,你的MAC是多少?" ...
- tp5 缩略图自写
1:php终端 安装扩展 使用Composer安装ThinkPHP5的图像处理类库: composer require topthink/think-image2:控制器代码: public func ...
- 在西电使用校内Linux 开源软件镜像
西电开源社区(linux.xidian.edu.cn)为全校师生提供开源镜像服务,由于其使用校内服务器,因此产生的流量不会计入校园网 打开镜像列表:https://linux.xidian.edu.c ...
- SqlServer Split 的实现
数据库如何处理传参用指定字符隔开参数的情况 如"name1,name3,name5" 共2种方式, 1.数据库内置函数STRING_SPLIT(sql2016之前的版本不支持该函数 ...
- 【公告】淘宝 npm 域名即将切换 && npmmirror 重构升级
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 前言 本文将包括两部分内容: 淘宝 npm 域名即将停止解析 npmmirror 镜像站大重构升级 原淘宝 npm 域名即将停止解析 正如在< ...
- fastcgi未授权访问及任意命令执行
1. 漏洞原理 服务端使用fastcgi协议并对外网开放9000端口,攻击者可以构造fastcgi协议包内容,实现未授权访问服务端.php文件以及执行任意命令. 2. 漏洞利用 第一步 搭建vulhu ...
- Delete、truncate、drop都是删除语句,它们有什么分别?
delete 属于DML语句,删除数据,保留表结构,需要commit,可以回滚,如果数据量大,很慢. truncate 属于DDL语句,删除所有数据,保留表结构,自动commit,不可以回滚,一次全部 ...
- 解释AOP?
面向切面的编程,或AOP, 是一种编程技术,允许程序模块化横向切割关注点,或横切典型的责任划分,如日志和事务管理.