前段时间在做微信h5的时候，遇到了ios兼容，使用clipboard.js插件完美解决

下载地址：下载地址： https://github.com/zenorocha/clipboard.js

cnd 引入js ： https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js

html部分：

<div id="foo">需要被粘贴的内容</div>

<!-- 复制按钮 -->

<a class="copyBtn"  href="javascript:"  data-clipboard-action="copy"  data-clipboard-target="#foo"></a>

js部分：

 var clipboard = new Clipboard('.copyBtn').on('success', function(e) {

        var e = e || window.event;

        console.log('复制成功！！！');

    }).on('error', function(e) {});

完整

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>iOS复制兼容</title>

</head>

<body>

    <div id="foo">需要被粘贴的内容</div>

    <!-- 复制按钮 -->

    <a class="copyBtn"  href="javascript:"  data-clipboard-action="copy"  data-clipboard-target="#foo"></a>

  <script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>

  <script>

    window.onload = function(){

      var clipboard = new Clipboard('.copyBtn').on('success', function(e) {

        var e = e || window.event;

        console.log('复制成功！！！');

    }).on('error', function(e) {});

  }

  </script>

</body>

</html>

h5微信浏览器复制粘贴--ios兼容问题的解决方法（clipboard.js插件）的更多相关文章

  1. ios微信浏览器click事件不起作用的解决方法

    $(document).on( "click", ".weui_cell", function (event) {alert(); }); JS代码是这样的,h ...

  2. 微信浏览器发送ajax请求执行多次解决方法

    http://www.cnblogs.com/whatlonelytear/p/8934738.html

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

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

  4. Clipboard 自动复制功能，ios复制失败，换方案 user-select: text ;长按复制 （ios 兼容，长按复制）

    Clipboard 自动复制功能,嵌套app内跳转的页面,ios 自动复制失败(该ios机子,微信,浏览器打开复制没有问题) 暂时换方案    user-select: text ;长按复制 (ios ...

  5. ZeroClipboard跨浏览器复制粘贴

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard跨浏览器复制粘贴</title> < ...

  6. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

  7. 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放

    我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...

  8. H5兼容问题及解决方法

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="wi ...

  9. Web前端入门教程之浏览器兼容问题及解决方法

    JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...

随机推荐

  1. Altium Designer设计PCB--如何设置铺铜与导线或过孔的间距

    笑话: 到银行汇款,车临时停路边上. 为了怕交警罚就把朋友留下看车,跟他说有查车的过来了告诉我一声. 进去几分钟果然有交警来了. 那个朋友风风火火地闯进银行大声吼道:“大哥,警察来了,快走啊!” 偌大 ...

  2. 【深入浅出-JVM】（4）：编译 jdk

    环境 mac,xcode,jdk8,openjdk,autoconf 步骤 安装autoconf brew install autoconf 下载openjdk源码 git clone https:/ ...

  3. 理解vue-loader

    事情的起源是被人问到,一个以.vue结尾的文件,是如何被编译然后运行在浏览器中的?突然发现,对这一块模糊的很,而且看mpvue的文档,甚至小程序之类的都是实现了自己的loader,所以十分必要抽时间去 ...

  4. shell的用处到底大不大

    我曾在智联招聘等网站上搜寻有关shell脚本员的职位,与C++.JAVA等热门语言相比,冷清很多.看上去似乎招shell程序员的公司比较少.是不是公司不重视或者是很少用到shell这个东东呢?     ...

  5. php laravel5.6引入geetest 行为验证

    php laravel5.6引入geetest 行为验证 使用必要性 网站和APP,在所有可能被机器行为攻击的场景,例如但不限于注册.登录.短信接口.查询接口.营销活动.发帖评论等等,都可以部署使用「 ...

  6. 关于sprintf的使用注意

    今天在使用sprintf时,本想简单一点,将第一个参数直接定义为一个字符型的指针(cher  *str;),结果没想到程序变得死死的,老老实实的将第一个参数重新变回字符型数组吧(char str[10 ...

  7. Spring方法级别数据校验：@Validated + MethodValidationPostProcessor

    每篇一句 在<深度工作>中作者提出这么一个公式:高质量产出=时间*专注度.所以高质量的产出不是靠时间熬出来的,而是效率为王 相关阅读 [小家Java]深入了解数据校验:Java Bean ...

  8. IO-文件输出流

    一.输出流的原理 Java向文件中写数据的原理 Java程序-->JVM(java虚拟机)-->OS(操作系统)-->OS调用写数据的方法-->把数据写入到文件中 tips: ...

  9. JVM执行原理

    ,Java是一种技术,它由四方面组成:Java编程语言.Java类文件格式.Java虚拟机和Java应用程序接口(Java API).它们的关系如下图所示: 运行期环境代表着Java平台,开发人员编写 ...

  10. 在eclipse中创建Web项目中没有web.xml的解决方法

      右键点击项目 → “Java EE Tool” → “Generate Deployment descriptor stub” 即可生成web.xml文件