再使用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的更多相关文章

  1. 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓

    <!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...

  2. h5微信浏览器复制粘贴--ios兼容问题的解决方法(clipboard.js插件)

    前段时间在做微信h5的时候,遇到了ios兼容,使用clipboard.js插件完美解决 下载地址:下载地址: https://github.com/zenorocha/clipboard.js cnd ...

  3. clipboard.js操作剪贴版——一些移动端交互和兼容经验

    https://github.com/zenorocha/clipboard.js 库,真的是个好库,而且不依赖flash,几乎完美支持移动端.但是,移动端应用有些不趟不知的小tip,这里归档下. 原 ...

  4. 关于前端本地压缩图片,兼容IOS/Android/PC且自动按需加载文件之lrz.bundle.js

    一.介绍说明主要特点: ①在前端压缩好要上传的图片可以更快的发送给后端,因此也特别适合在移动设备上使用. ②兼容IOS/Android,修复了IOS/Android某些版本已知的BUG. ③按需加载文 ...

  5. JavaScript实现点击复制按钮复制文本框的内容,兼容IOS

    <lable> <input type="text" id="txt"> <a href="javascript:;&q ...

  6. clipboard.js实现页面内容复制到剪贴板

    clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...

  7. 使用 iosOverlay.js 创建 iOS 风格的提示和通知

    iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...

  8. 使用clipboard.js复制页面内容到剪切板

    最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...

  9. 【Node.app】Node.js for iOS

    Node.app 是用于 iOS 开发的 Node.js 解释器,它允许最大的代码重用和快速创新,占用资源很少,为您的移动应用程序提供 Node.js 兼容的 JavaScript API.你的客户甚 ...

随机推荐

  1. C#实现的鼠标钩子

    http://www.oschina.net/code/snippet_104607_45975 使用 Socket 获得网页内容,可以捕获错误页的内容 HttpClient http://www.o ...

  2. Unity使用外部版本控制

    Using External Version Control Systems with Unity Unity offers an Asset Server add-on product for ea ...

  3. 10.9NOIP模拟题

    /* big模拟 细节不少 remove表示这个玩意儿在这一秒有没有移动 注意在一秒内所有小葱一起移动,所以如果一个一个处理 别忘了“错位”这种情况 */ #include<iostream&g ...

  4. codevs1183 泥泞的道路(01分数规划)

    1183 泥泞的道路  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond       题目描述 Description CS有n个小区,并且任意小区之间都有两 ...

  5. justify-content属性

    justify-content 用于设置或检索弹性盒子元素在主轴方向上的对齐方式. 属性值:flex-start 属性值:flex-end 属性值:center 属性值:space-between 属 ...

  6. Asp.Net 开发实战技术

    1.什么是WMI技术 WMI是一项核心的Windows管理技术,WMI作为一种规范和基础结构,通过它可以访问.配置.管理和监视几乎所有的Windows资源,比如用户可以在远程计算机器上启动一个进程:设 ...

  7. 289 Game of Life 生命的游戏

    假设有一个大小为m*n的板子,有m行,n列个细胞.每个细胞有一个初始的状态,死亡或者存活.每个细胞和它的邻居(垂直,水平以及对角线).互动规则如下:1.当前细胞存活时,周围低于2个存活细胞时,该细胞死 ...

  8. Roslyn导致发布网站时报错:编译失败

    最近新升级了Visual Studio 2017,创建的Web项目Bin目录中多了一个叫roslyn的文件夹,该文件夹导致网站在某些服务器上发布出错 从网上搜索了一下,Roslyn是新出的动态编译工具 ...

  9. CF814C An impassioned circulation of affection

    思路: 对于题目中的一个查询(m, c),枚举子区间[l, r](0 <= l <= r < n),若该区间满足其中的非c字符个数x不超过m,则可以将其合法转换为一个长度为r-l+1 ...

  10. CSS布局整理

    目录 常用居中方法 水平居中 垂直居中 单列布局 二列&三列布局 float+margin position+margin 圣杯布局(float+负margin) 双飞翼布局(float+负m ...