clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单

<input type="text" name="copy_txt" id="copy_txt" value="6228 4600 8801 4620 974" readonly/>
<button id="copy" data-clipboard-action="copy" data-clipboard-target="#copy_txt">复制账号</button>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/payway/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) {
console.log(e);
}); clipboard.on('error', function(e) {
console.log(e);
});
</script>

应用在移动端的时候出现了兼容问题,安卓可以完全适配,但是苹果手机要求Safari 10+才能使用,目前并没有解决的方法,

这样的话,我们改变了解决方案,使用click事件结合安卓、ios给到的复制规则来实现此功能。

clipboard.js实现页面内容复制到剪贴板的更多相关文章

  1. 使用clipBoard.js进行页面内容复制

    官方网址: https://clipboardjs.com/

  2. Clipboard.js – 现代方式实现复制文本到剪贴板

    复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...

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

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

  4. ZeroclipboardJS+flash实现将内容复制到剪贴板实例

    Zeroclipboard 的实现原理 Zeroclipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.但最新的 Flash ...

  5. Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能

    开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了. 本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 F ...

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

      javascript 将内容复制到剪贴板 CreateTime--2017年9月19日11:36:50 Author:Marydon js 操作剪贴板 1.设置剪贴板内容 UpdateTime-- ...

  7. 如是使用JS实现页面内容随机显示

    之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...

  8. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

  9. clipboard.js -- js实现将文本复制到剪贴板的方法

    资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...

随机推荐

  1. org.springframework.web.servlet.DispatcherServlet异常

    org.springframework.web.servlet.DispatcherServlet: No mapping found for HTTP request with URI [/] in ...

  2. leetcode-第14周双周赛-1272-删除区间

    题目描述: 自己的提交: class Solution: def removeInterval(self, intervals: List[List[int]], toBeRemoved: List[ ...

  3. leetcode-13双周赛-1257-最小公共区域

    题目描述: 方法: class Solution(object): def findSmallestRegion(self, regions, region1, region2): parent = ...

  4. (一)CGI (通用网关接口) 简介

    CGI (通用网关接口)公共网关接口(Common Gateway Interface,CGI)是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能.CGI 应用程序能与浏览器 ...

  5. 【NOI2019模拟2019.6.29】字符串(SA|SAM+主席树)

    Description: 1<=n<=5e4 题解: 考虑\(f\)这个东西应该是怎样算的? 不妨建出SA,然后按height从大到小启发式合并,显然只有相邻的才可能成为最优答案.这样的只 ...

  6. 阿里云HBase全新发布X-Pack NoSQL数据库再上新台阶

    一.八年双十一,造就国内最大最专业HBase技术团队 阿里巴巴集团早在2010开始研究并把HBase投入生产环境使用,从最初的淘宝历史交易记录,到蚂蚁安全风控数据存储.持续8年的投入,历经8年双十一锻 ...

  7. cartographer和ROS的坐标系关系

    参考定义见:backpack_3d.lua    Local map frame是一次slam过程中的原点.但是现在cartographer支持Incremental mapping.global m ...

  8. python爬虫 mac下安装使用Fiddler

    HTTP代理工具Fiddler Fiddler是一款强大Web调试工具,它能记录所有客户端和服务器的HTTP请求. Getting started 在安装之前需要准备Mono环境 If you don ...

  9. 堆、栈、方法区、静态代码块---Java

    java 堆.栈.方法区 堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的目的是得到操作指令) 2.jvm只有一个堆区(heap)被所有线程共享,堆中不存放基 ...

  10. Fiddler设置抓一个域名下个包

    设置抓一个域名下个包 右侧Filters 勾选Use Filters 勾选Hosts 选择 Show only the follwing Hosts  设置好自己的抓包的域名