前段时间在做微信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. mpvue开发微信小程序

    前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...

  2. 接口文档注解：@ApiOperation

    @ApiOperation不是spring自带的注解是swagger里的 com.wordnik.swagger.annotations.ApiOperation; @ApiOperation和@Ap ...

  3. 再见Jenkins，从Gitlab代码提交到k8s服务持续交付只需七毛三(走过路过不要错过)

    Gitlab runner 快速搭建CICD pipeline 背景 日常开发中,相信大家已经做了很多的自动化运维环境,用的最多的想必就是利用Jenkins实现代码提交到自动化测试再到自动化打包,部署 ...

  4. 项目心得——mybatisplus注解

    最近在做的项目中使用了mybatisplus,遇到了一些小问题,特此记录. 1.在sql查询后返回的数据中,会存在一些实体类中本没有的字段: 遇到这个问题时,我理所当然的就去实体类中添加了这个字段,但 ...

  5. python实现DFA模拟程序(附java实现代码)

    DFA(确定的有穷自动机) 一个确定的有穷自动机M是一个五元组: M=(K,∑,f,S,Z) K是一个有穷集,它的每个元素称为一个状态. ∑是一个有穷字母表,它的每一个元素称为一个输入符号,所以也陈∑ ...

  6. 个人永久性免费-Excel催化剂功能第51波-聚光灯功能，长宽工作表不看错位使用

    Excel的聚光灯功能,笔者是有点看不上,也曾经写文吐槽过这些类似的功能的实用性,但现实可能真的很多小白很需要,大家Excel水平参差不齐,大量的不规范做表习惯,致使此功能使用场景仍然非常广阔.很怀疑 ...

  7. TCP协议传输大文件读取时候的问题

    TCP协议传输大文件读取时候的问题 大文件传不完的bug 我们在定义的时候定义服务端每次文件读取大小为10240, 客户端每次接受大小为10240 我们想当然的认为客户端每次读取大小就是10240而把 ...

  8. http面试笔试常考知识点（二）

    接上一篇随笔 1. https协议为什么比http安全? 内容加密:建立一个信息安全通道,确保信息传输安全: 身份认证:确保网站的真实性: 数据完整性校验:防止内容被第三方冒充或者篡改 2.常见状态码 ...

  9. c实现哲学家进餐问题。WINDOWS下。

    // 解决哲学家就餐问题// 每个哲学家可用一个线程来模拟.// 设有5个哲学家,5只筷子,每个哲学家吃饭时间为一个随机值,哲学家吃饭后的思考时间也是一个随机值.#include <Window ...

  10. JavaScript数组高性能去重解决方案

    在大多数的人眼里,数组去重是一个很简单的课题,很多人甚至熟练掌握了多种数组去重的方法,然而大多时候,我们却忽略了数组去重所消耗的时间资源.譬如我们在做前端性能优化的时候,又有多少人会考虑JavaScr ...