再使用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. sqlserver新加一自增长的列,并且更新为行号

    --查询行号 select row_number()over(order by CHECKTIME )as RowNum,*from CHECKINOUT --更新id列为行号 update CHEC ...

  2. bzoj 2097: [Usaco2010 Dec]Exercise 奶牛健美操【二分+树形dp】

    二分答案,然后dp判断是否合法 具体方法是设f[u]为u点到其子树中的最长链,每次把所有儿子的f值取出来排序,如果某两条能组合出大于mid的链就断掉f较大的一条 a是全局数组!!所以要先dfs完子树才 ...

  3. c++ rand && srand 函数

    RAND: 结构:rand()     注:rand()不需要参数,它会根据种子返回一个从0到最大随机数的任意整数. 作用:生成一个随机数. 头文件:#include <cstdlib> ...

  4. JavaScript(十四)经典的Ajax

    (function(){ //唯一向外暴露一个顶层变量 var myajax = window.myajax = {}; //作者.版本号信息 myajax.author = "maxwel ...

  5. Android 仿微信调用第三方应用导航(百度,高德、腾讯)

    实现目标 先来一张微信功能截图看看要做什么  其实就是有一个目的地,点击目的地的时候弹出可选择的应用进行导航. 大脑动一下,要实现这个功能应该大体分成两步: 底部弹出可选的地图菜单进行展示 点击具体菜 ...

  6. python自动化--mock、webservice及webdriver模拟手机浏览器

    一.mock实现 自定义一个类,用来模拟未完成部分的开发代码 class Say(): def say_hello(self): pass 自定义返回值 import unittest from un ...

  7. 360 你妈妈知道你跟Python存在兼容问题吗?

    最近在用Python2.7.6版本开发的的过程中发现了一个问题 提示:UnicodeDecodeError:'ascii' codec can't decode bytes 0xb0 刚开始以为是编码 ...

  8. Farseer.net轻量级开源框架 入门篇:Where条件的终极使用

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 查询数据详解 下一篇:Farseer.net轻量级开源框架 中级篇: 事务的使用 ...

  9. JAVA 学习笔记 - 基础语法 2

    ---恢复内容开始--- 1.数组的申明和应用 数据类型 数组名称[] = null;             //在堆栈中申明变量名称 数组名称 =  new  数据类型[10];       // ...

  10. 第五届蓝桥杯校内选拔第七题_(树型dp)

    G将军有一支训练有素的军队,这个军队除开G将军外,每名士兵都有一个直接上级(可能是其他士兵,也可能是G将军).现在G将军将接受一个特别的任务,需要派遣一部分士兵(至少一个)组成一个敢死队,为了增加敢死 ...