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:/ ...
随机推荐
- SqlServer 取表某一列相同ID最大时的数据
SELECT * FROM(SELECT *,ROW_NUMBER() OVER(PARTITION BY UserName ORDER BY Id DESC) Num FROM dbo.[User] ...
- 初识html及网络爬虫概念
网络爬虫 HTML超文本标记语言 HTTP协议 简单的网络请求 python模块模拟浏览器发送请求 爬虫小案例 爬虫简介 我们一般情况 都是通过浏览器正常访问服务端获取资源浏览器展示给用户看 爬虫 模 ...
- LeetCode-011-盛最多水的容器
盛最多水的容器 题目描述:给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, ...
- Web端网站兼容性测试如何进行?来看看浏览器的兼容性测试要点
软件兼容性测试工作的目标是保证软件按照用户期望的方式进行交互.随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越重要. 平台的兼容性,包 ...
- 华为交换机配置ACL详细步骤
ACL 介绍 #2000-2999普通ACL,根据源IP过滤 #3000-3999高级ACL,根据源目的端口和源目的地址等过滤 #4000-4999二层ACL,根据源目的MAC等过滤 配置举例: 拒绝 ...
- 2022年官网下安装MongoDB最全版与官网查阅方法(5.0.6)
一.下载安装 1.百度搜索,找到官网,或直接访问:https://www.mongodb.com/ 2.寻找下载位置,双击下载. 3.找到本地位置,双击执行,进入欢迎界面,选择next. 4.勾选协议 ...
- Go值类型和引用类型+作用域+空白标识符+常量
值类型和引用类型 所有像 int.float.bool 和 string 这些基本类型都属于值类型,使用这些类型的变量直接指向存在内存中的值: 当使用等号 = 将一个变量的值赋值给另一个变量时,如:j ...
- DTD与Schema约束
1.DTD:(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法 规则.它是标准通用标记语言.2.XML Schema 是基于XML的DTD替代者 ...
- 在kali中安装两个版本的python
在kali中安装两个版本的python 在kali中已经预装了两个版本的python,但是没有装pip(>︿<). 这时使用python或者python3表示python3:使用pytho ...
- Oracle视图、存过、包、方法赋予/收回权限给用户
oracle给某用户授权/回收视图查询 赋权: grant select on $_view to $_user; 这样 $_user用户就拥有了查询$_view视图的权限了 回收: revoke s ...