由于太忙很久没写博客了,如有错误遗漏,请指出,感谢!

首先这里要注意,是微信浏览器下的解决方案,其他浏览器请自行测试。

先说复制到剪贴板主要有什么使用场景:

  • 优惠券优惠码,需要用户复制
  • 淘宝商品,需要复制淘口令

由于淘宝链接无法在微信中打开,所以淘宝开发了淘口令方便物质传播,而导购网站在微信推广的时候也是生成口令,用户只需要复制口令,打开手机淘宝,即可看到对应的商品:

这里要使用的是一个非常强大的工具Clipboardjs,这个工具只需要引入对应的js,即可方便的完成上面的功能。

引入js,这里我把js放在了服务器,通过url请求访问即可,官网方法是下载对应的js文件。

页面代码:

<div class="test-area">
<input id="taokouling" value="{{code}}" type="text">
<button id="copyCode" class="btn" data-clipboard-target="#taokouling" data-clipboard-action="copy">
复制淘口令
</button>
<script type="text/javascript" src="http://www.fndroid.cn/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e){
console.log(e);
document.getElementById('copyCode').innerHTML = '复制成功';
});
clipboard.on('error', function(e){
document.getElementById('copyCode').innerHTML = '复制失败,请长按复制';
});
</script>
</div>

虽然这个代码很简单,但是却能兼容当前版本的iOS和Android微信浏览器,查了很多的代码才发现这个,所以记录一下,后面的人如果需求一样就不用走弯路了。

JS--微信浏览器复制到剪贴板实现的更多相关文章

  1. js 将内容复制到剪贴板

      js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(windo ...

  2. 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...

  3. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

  4. js实现各种复制到剪贴板的方法

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=d ...

  5. JS实现各种复制到剪贴板

    一.实现点击按钮,复制文本框中的的内容                         <script type="text/javascript"> function ...

  6. js将内容复制到剪贴板

    有一需求,点击按钮要将某个值复制到剪贴板. 第一种,代码如下: <div cols="20" id="biao1">12345678</div ...

  7. js调用浏览器复制

    <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementBy ...

  8. h5微信浏览器复制粘贴--ios兼容问题的解决方法(clipboard.js插件)

    前段时间在做微信h5的时候,遇到了ios兼容,使用clipboard.js插件完美解决 下载地址:下载地址: https://github.com/zenorocha/clipboard.js cnd ...

  9. js/jQuery实现复制到剪贴板功能,兼容所有浏览器

    因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...

随机推荐

  1. 3_初学sql注入

    sql注入的分类:布尔型 报错型 可联合查询型 多语句查询型 基于时间延迟注入 1.注释符 # /* -- 2.过滤空格注入 使用/**/或()或+代替空格 3.多条数据显示 concat(str1, ...

  2. 【Zigbee技术入门教程-02】一图读懂ZStack协议栈的基本架构和工作机理

    [Zigbee技术入门教程-02]一图读懂ZStack协议栈的基本架构和工作机理 广东职业技术学院  欧浩源  ohy3686@foxmail.com Z-Stack协议栈是一个基于任务轮询方式的操作 ...

  3. jQuery遍历-后代

    后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...

  4. python专题-Mysql数据库(python3._+ PyMysql)

    之前写过一篇 Python使用MySQL数据库的博客,主要使用的是Python2和MySQLdb驱动. python使用mysql数据库 Python2 ---> Python3 MySQLdb ...

  5. Spring详解(四)------注解配置IOC、DI

    Annotation(注解)是JDK1.5及以后版本引入的.它可以用于创建文档,跟踪代码中的依赖性,甚至执行基本编译时检查.注解是以‘@注解名’在代码中存在的. 前面讲解 IOC 和 DI 都是通过 ...

  6. 服务端性能测试 TPS

     针对服务器端的性能,以TPS为主来衡量系统的性能,并发用户数为辅来衡量系统的性能,如果必须要用并发用户数来衡量的话,需要一个前提,那就是交易在多长时间内完成,因为在系统负载不高的情况下,将思考时间( ...

  7. HDMI转MIPI DSI芯片方案TC358870XBG

    型号:TC358870XBG功能:HDMI1.4b转MIPI DSI通信方式:IIC分辨率:2560*1600@60fps/4k*2k@30fps电源:3.3/1.8/1.2/1.1封装形式:BGA8 ...

  8. django文件上传

    -------------------上传图片-------------------1.model中定义属性类型为models.ImageField类型 pic=models.ImageField(u ...

  9. UWP 手绘视频创作工具技术分享系列

    开篇先来说一下写这篇文章的初衷. 初到来画,通读了来画 UWP App 的代码,发现里面确实有很多比较高深的技术点,同时也是有很多问题的,扩展性,耦合,性能,功能等等.于是我们决定从头重构这个产品,做 ...

  10. Maven(二)Maven项目的创建(命令、myeclipse)及生命周期

    上一篇给大家介绍了Maven的概念和仓库的一些信息,接下来给大家分享一下使用命令和MyEclipse创建Maven项目 一.使用命令管理Maven项目 1.1.创建Maven java项目 1)创建一 ...