再使用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. bzoj4619

    4619: [Wf2016]Swap Space Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 129  Solved: 54[Submit][Sta ...

  2. 使用inet_ntoa() 时编译提示错误:

    char*inet_ntoa(struct in_addr in)将一个IP转换成一个互联网标准点分格式的字符串. 我把 inet_ntoa 需要的头文件加上去:    #include <sy ...

  3. 利用 BASE64Encoder 对字符串进行加密 BASE64Decoder进行解密

    转自:https://blog.csdn.net/chenyongtu110/article/details/51694323

  4. UVaLive 6834 Shopping (贪心)

    题意:给定 n 个商店,然后有 m个限制,去 c 之前必须先去d,问你从0到n+1,最短路程是多少. 析:我们我们要到c,必须要先到d,那么举个例子,2 5, 3 7,如果我们先到5再到2,再到7再到 ...

  5. UVaLive 6832 Bit String Reordering (模拟)

    题意:给定一个01序列,然后让你你最少的操作数把这它变成目标. 析:由于01必须是交替出现的,那么我们就算两次,然后取最值. 代码如下: #pragma comment(linker, "/ ...

  6. eclipse faild to creat the java Virtual Machine的解决办法

    打开eclipse的时候突然出现了 faild to creat the java Virtual Machine 解决办法:打开解压后的Eclipse文件夹,找到eclipse.ini配置文件 打开 ...

  7. C/C++自实现的函数(memset, memcpy, atoi)

    函数原型: void * memset ( void * buffer, int c, size_t num ); 关于void * 因为任何类型的指针都可以传入memset函数,这也真是体现了内存操 ...

  8. Geoserver常见问题总结

    原文地址 :http://blog.csdn.net/mygisforum/article/details/8249093 http://www.cnblogs.com/wang985850293/p ...

  9. offset家族基本简介

    Offset家族简介 offset这个单词本身是--偏移,补偿,位移的意思. js中有一套方便的获取元素尺寸的办法就是offset家族: offsetWidth和offsetHight 以及offse ...

  10. Android RecyclerView 滑动时图片加载的优化

    RecyclerView 滑动时的优化处理 在滑动时停止加载图片,在滑动停止时开始加载图片,这里用了Glide.pause 和Glide.resume.这里为了避免重复设置增加开销,设置了一个标志变量 ...