前段时间在做微信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. Effective Java第三版（一） ——用静态工厂代替构造器

    此文做为<Effective Java>系列的第一篇,所以有必要大概说下此书的特点,当然很多人可能都看过,毕竟是有着Java四大名著之一的大名在外,不过总会有萌新不了解,例如我!<E ...

  2. vue项目缓存最佳实践

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要 ...

  3. Redis主从复制实现原理

    一.Redis2.8之前的版本, 首先redis复制功能分为同步操作和命令传播两个操作 同步操作作于将从服务器的数据库状态更新至主服务器当前所处的数据库状态  命令传播操作则用于在主服务器的数据库状态 ...

  4. WinForm控件之【Button】

    基本介绍 普通按钮大部分情况下用作页面对某系列操作后的提交确认,应用较为广泛,在winfrom控件当中使用设置都相对的简单. 常设置属性.事件 Image:控件上显示的图片: Enabled  :指示 ...

  5. ElasticSearch7.2安装

    1.环境 Java -version:java11 centos: 7.2 elasticsearch: 7.2 2.获取压缩包 wget https://artifacts.elastic.co/d ...

  6. [记录]python异步编程async/await实现

    from selectors import DefaultSelector, EVENT_READ, EVENT_WRITE import socket from types import corou ...

  7. jdk安装错误1316，jdk-10.0.1

    打开注册表regedit ,定个位到 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft\ 把jdk,jre下面的目录删掉.即10.0.1 ,问题解决 参考: https ...

  8. JAVA通过URL链接获取视频文件信息（无需下载文件）

    最近项目碰到一个大坑:APP上需要在获取视频列表时就获取视频的时长,但早期上传的时候数据库都没有保存这个数据,所以前段时间添加一个时长字段,在上传时手动输入视频时长,但是之前库中有上万条数据没这个信息 ...

  9. fjnuoj 1003 学长的QQ号

    题目: //QQ是一个9位数,由1,2,3,4,5,9组成,且第1.6位数字相同,第2.4位数字相同,第5.7位数字相同.            //我的QQ就在符合上诉条件中的所有9位数从小到大排第 ...

  10. [leetcode] 106. Construct Binary Tree from Inorder and Postorder Traversal（medium）

    原题地址 思路: 和leetcode105题差不多,这道题是给中序和后序,求出二叉树. 解法一: 思路和105题差不多,只是pos是从后往前遍历,生成树顺序也是先右后左. class Solution ...