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

    http://www.lydsy.com/JudgeOnline/problem.php?id=2419 ∑Ui−UjRi,j=0∑Ui−UjRi,j=0 ∑U1−UjR1,j=1∑U1−UjR1,j ...

  2. MogileFS介绍

    MogileFS介绍 MogileFS 是一个开源的分布式文件存储系统,由LiveJournal旗下的Danga Interactive公司开发. Danga团队开发了包括 Memcached.Mog ...

  3. vue-easytable

    github地址:https://github.com/huangshuwei/vue-easytable

  4. 0626-TP整理二(调试模式,空操作,跨控制器调用,跨方法跳转--redirect(),框架语法,创建model模型)

    一.调试模式(入口文件:index.php) define('APP_DEBUG', true);  //调试模式 define('APP_DEBUG', FALSE);  //运行模式 开启日志信息 ...

  5. bzoj 1655: [Usaco2006 Jan] Dollar Dayz 奶牛商店【高精度+完全背包】

    居然要用高精度! 懒得operator了,转移是裸的完全背包 #include<iostream> #include<cstdio> using namespace std; ...

  6. 406 Queue Reconstruction by Height 根据身高重建队列

    假设有打乱顺序的一群人站成一个队列. 每个人由一个整数对(h, k)表示,其中h是这个人的身高,k是排在这个人前面且身高大于或等于h的人数. 编写一个算法来重建这个队列.注意:总人数少于1100人.示 ...

  7. IKanalyzer、ansj_seg、jcseg三种中文分词器的实战较量

    转自:http://lies-joker.iteye.com/blog/2173086 选手:IKanalyzer.ansj_seg.jcseg 硬件:i5-3470 3.2GHz 8GB win7 ...

  8. NodeJs学习记录(五)初学阶段关于ejs和路由

    1.因为只是用了一点皮毛,所以使用起来感觉基本和jsp无异, 逻辑代码块使用  <%  if() {} else  %> , 输出参数值使用 <%=title  %>, 有一个 ...

  9. NodeJs学习记录(一)初步学习,杂乱备忘

    2016/12/26 星期一 1.在win7下安装了NodeJs 1)进入官网 https://nodejs.org/en/download/,下载对应的安装包,我目前下载的是node-v6.2.0- ...

  10. 文档声明和HTML样式表

    文档声明 不是注释也不是元素,总是在HTML的第一行 书写格式:<!DOCTYPE HTML> 是用于通知浏览器目前文档正使用哪一个HTML版本(相关属性 lang) 若不写文档声明,浏览 ...