clipboard.js兼容ios
再使用clipboard.js做项目时,项目需求是在非input,button等可以点击的标签(span,p,div)上实现点击来复制内容,在PC端和移动端android没问题,但是到了ios毫无反应,就是渣渣,调兼容调了好大一会儿,总算解决了这个bug,现在把方法分享给大家,
其实不算复杂,主要是给标签添加样式,就是自己不知道ios系统的标签特性:
一开始的html代码如下:
<span id="foo" data-clipboard-target="#foo" data-clipboard-action="copy">哈哈,我被复制了</span>
上面的写法,在android没问题,正常实现,ios毫无反应,修改后如下:
<span style="cursor: pointer" onclick="" class="btn" id="foo" data-clipboard-target="#foo" data-clipboard-action="copy" >哈哈,这下ios可以复制我了</span>
注意给span加了一个css属性:cuosor:pointer;以及 onclick="",这个空事件,原因是ios默认非点击标签不具有点击效果,所以给这些标签添加相关属性,这样系统可以识别出来!
js代码如下:
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert('复制成功');
e.clearSelection();
}); clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
clipboard.js兼容ios的更多相关文章
- 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓
<!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...
- h5微信浏览器复制粘贴--ios兼容问题的解决方法(clipboard.js插件)
前段时间在做微信h5的时候,遇到了ios兼容,使用clipboard.js插件完美解决 下载地址:下载地址: https://github.com/zenorocha/clipboard.js cnd ...
- clipboard.js操作剪贴版——一些移动端交互和兼容经验
https://github.com/zenorocha/clipboard.js 库,真的是个好库,而且不依赖flash,几乎完美支持移动端.但是,移动端应用有些不趟不知的小tip,这里归档下. 原 ...
- 关于前端本地压缩图片,兼容IOS/Android/PC且自动按需加载文件之lrz.bundle.js
一.介绍说明主要特点: ①在前端压缩好要上传的图片可以更快的发送给后端,因此也特别适合在移动设备上使用. ②兼容IOS/Android,修复了IOS/Android某些版本已知的BUG. ③按需加载文 ...
- JavaScript实现点击复制按钮复制文本框的内容,兼容IOS
<lable> <input type="text" id="txt"> <a href="javascript:;&q ...
- clipboard.js实现页面内容复制到剪贴板
clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...
- 使用 iosOverlay.js 创建 iOS 风格的提示和通知
iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...
- 使用clipboard.js复制页面内容到剪切板
最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...
- 【Node.app】Node.js for iOS
Node.app 是用于 iOS 开发的 Node.js 解释器,它允许最大的代码重用和快速创新,占用资源很少,为您的移动应用程序提供 Node.js 兼容的 JavaScript API.你的客户甚 ...
随机推荐
- jquery中$()的使用
在jquery中最常使用的就是$这个符号了,在我没有系统的学习jquery之前,我用到的$都是用于对元素的选择,而这只是$的很简单的用法.在jquery$()函数一共有三种用法: $(selector ...
- vue项目开发中踩过的坑
一.路由 这两天移动端的同事在研究vue,跟我说看着我的项目做的,子路由访问的时候是空白的,我第一反应是,不会模块没加载进来吧,还是....此处省略一千字... 废话不多说上代码 路由代码 { pat ...
- codeforces 402E - Strictly Positive Matrix【tarjan】
首先认识一下01邻接矩阵k次幂的意义:经过k条边(x,y)之间的路径条数 所以可以把矩阵当成邻接矩阵,全是>0的话意味着两两之间都能相连,也就是整个都要在一个强连通分量里,所以直接tarjan染 ...
- 洛谷P3366 【模板】最小生成树(Kruskal)
题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: 第一行包含两个整数N.M,表示该图共有N个结点和M条无向边.(N<=5000,M<= ...
- JQ 获取Table的td 值
<script type="text/javascript"> function SetTable() { $("#myTab table").ea ...
- SQL 经典语句大全
原地址:http://www.cnblogs.com/yubinfeng/archive/2010/11/02/1867386.html 一.基础 1.说明:创建数据库 CREATE DATABASE ...
- [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列
Description N(1<=N<=100000)头牛,一共K(1<=K<=30)种特色,每头牛有多种特色,用二进制01表示它的特色ID.比如特色ID为13(1101),则 ...
- [BZOJ3223/Tyvj1729]文艺平衡树
Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列 其中需要提供以下操作: 翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 ...
- MacOS 下安装 MySQL8.0 登陆 MySQL
按照 官方教程 ,下载安装包,点击安装后,如需在命令行启动,还需设置命令路径: 在命令行中,打开配置文件 .bash_profile: vim ~/.bash_profile 在最后一行加上: PAT ...
- eclipse安装提示错误:Failed to load JNI shared library "D:\jdk1.7\client\jvm.dll"
错误截图如下 原因是jdk32位,eclipse64位导致,修改jdk版本为64位或者修改ecipse版本为32位即可.