JS--微信浏览器复制到剪贴板实现

摘要:
官方网站的方法是下载相应的js文件。divclass=“测试区域”>inputid=“taokouling”value=“{{code}}”type=“text”>buttonid=“copyCode”class=“btn”数据剪贴板target=“#taokouling”数据剪贴板action=“copy”>复制淘宝密码<

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

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

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

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

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

JS--微信浏览器复制到剪贴板实现第1张

这里要使用的是一个非常强大的工具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--微信浏览器复制到剪贴板实现》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇寒假作业2:币值转换使用.Net访问Office编程接口下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

什么是TDD(一)

引子 回顾 虽然我很早以前就听说单元测试,也曾经多次在项目中引入单元测试框架和单元测试的实践为代码质量的提升带来了一丝助力。 但这种方式更多的是从软件调试的角度出发,即将单元测试作为一种测试方法可用性的入口,而非从TDD、极限编程、或从"Fail Fast,Fix Fast”这种获得快速反馈的方式来使用单元测试,使得实际过程中单元测试的效果并不明显。 直到去...

EasyUI 页面分页

DAO package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.Transaction...

windows下的shellcode剖析浅谈[转自看雪]

标 题: 【原创】windows下的shellcode剖析浅谈作 者:snowdbg时 间: 2009-10-06,11:12链 接: http://bbs.pediy.com/showthread.php?t=99007  今天是中秋节,正好我的文章在今天基本完成,作为中秋礼物送给大家,由于本人水平有限希望大家多多批评指正!学习了好些日子了,思路总是乱...

文档兼容性定义,使ie按指定的版本解析

   作为开发人员,特别是作为Web的前端开发人员 ,最悲催的莫过于要不断的,不断的去调试各种浏览器的显示效果,而这其中最让人头痛的莫过于MS下的IE系列浏览器,在IE系列中的调试我们将会发现没有一个是好伺候的,于是不得不学习各种Hack技术来满足各种浏览器之间的兼容。在这种痛苦中不断的挣扎,MS可能也实在是看不下去了,于是在IE8开始,微软引入了文档兼...

1046

Gridland Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 4127 Accepted Submission(s): 1900 Problem Description For y...

SpringBoot application.yml logback.xml,多环境配置,支持 java -jar --spring.profiles.active

趁今天有时间整理了一下 启动命令为 //开发环境 java -jar app.jar --spring.profiles.active=dev--server.port=8060 //测试环境 java -jar app.jar --spring.profiles.active=qa --server.port=8060 //生产环境 java -jar...