html5: 复制到剪贴板 clipboard.js

时间:2021-11-25 20:17:42

1、使用clipboard.min.js工具,引用此js
  注意事项:
    IOS微信网页开发中,若使用此工具来开发复制功能,则需要在超链接/按钮上新增 onclick=" "

2、clipboard使用

         <li class="flex ai-center jc-sb">
       <div class="reportCode">
<input class="fs-18" value="3VDK2109" readonly="readonly">
<div class="reportDate fs-13">2019.1.21</div>
</div>
<div class="reportEdit flex">
<div class="nextBtn fs-14 enable copyBtn" data-clipboard-text="Just because you can doesn't" onclick="">复制</div>
<div class="nextBtn fs-14">删除</div>
</div>
</li>
            //复制
var clipboard = new ClipboardJS('.copyBtn');//点击class为copyBtn的按钮复制内容 clipboard.on('success', function(e) {
e.clearSelection();
showMsg('复制成功');
}); clipboard.on('error', function(e) {
showMsg('您的手机暂不支持,请长按进行复制');
});
function showMsg(data){
layer.open({
content: data,
skin: 'msg',
time: 2
})
}

html5: 复制到剪贴板 clipboard.js的更多相关文章

  1. Js 之复制到剪贴板 clipboard&period;js

    一.下载 https://github.com/zenorocha/clipboard.js/archive/master.zip 二.Demo示例 <!DOCTYPE html> &lt ...

  2. 复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)

    复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题) 相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能.但是由于各大浏览器的实现方案不一样,导致几 ...

  3. 移动端无法复制:使用clipboard&period;js碰到的一个小问题

    移动端无法复制:使用clipboard.js碰到的一个小问题   直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...

  4. js实现剪切、复制、粘贴——clipBoard&period;js

    摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过j ...

  5. JavaScript复制内容到剪贴板 clipboard&period;js

    参考链接: https://github.com/axuebin/articles/issues/26#issuecomment-466337929

  6. 支付宝红包口令自动复制到剪贴板脚本js,安卓&comma;IOS通用版

    有客户找到涛舅舅,要求开发一个可以自动支付宝红包口令的js脚本,经过大量探索和优化,目前此脚本功能已经测试成功! 预期效果: 只要来访用户在当前网页的任意位置点击一下,支付宝红包口令即可复制到用户手机 ...

  7. 【原】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  8. Clipboard&period;js – 现代方式实现复制文本到剪贴板

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

  9. 使用clipboard&period;js实现复制内容至剪贴板

    下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...

随机推荐

  1. Canvas基础认识

    HTML5 Canvas         简单的说就是js+html5可以自定义绘制任何图形 认识Canvas元素 <canvas id="canvas" width=&qu ...

  2. Repository 返回 IQueryable?还是 IEnumerable?

    这是一个很有意思的问题,我们一步一步来探讨,首先需要明确两个概念(来自 MSDN): IQueryable:提供对未指定数据类型的特定数据源的查询进行计算的功能. IEnumerable:公开枚举数, ...

  3. 安装max plugin wizard

    参考:http://liweizhaolili.blog.163.com/blog/static/162307442013117731953/

  4. android studio 中获取sha1

    使用keytool 一.配置环境变量 由于要用到keytool工具,而keytool是jdk里的一个工具,首先将jdk/bin所在的目录加到环境变量的PATH中 看我的keytool所在位置 将所在路 ...

  5. JPA-一对多关系

    JPA中,一对多关系使用@OneToMany标示 关系维护端: package com.yl.demo1.bean.oneTomany; import javax.persistence.Cascad ...

  6. IIS修改队列长度

    Internet Information Services (IIS) 限制了在任何给定时间可在队列中等待的应用程序池请求的最大数量.如果达到此限制,则所有新请求都将被拒绝,而且用户将收到错误消息“5 ...

  7. websocket(三) 进阶!netty框架实现websocket达到高并发

    引言: 在前面两篇文章中,我们对原生websocket进行了了解,且用demo来简单的讲解了其用法.但是在实际项目中,那样的用法是不可取的,理由是tomcat对高并发的支持不怎么好,特别是tomcat ...

  8. Java经典编程题50道之四十七

    读取7个数(1~50)的整数值,每读取一个值,程序打印出该值个数的*. public class Example47 {    public static void main(String[] arg ...

  9. Linux 踩过的坑系列-01

    关于默认网关的添加.记得楼主之前有一次,无意之间,也不知道做了什么删除文件里面内容的操作,配置好静态IP之后上不了外网.翻阅个各种资料都是没有找到问题.最后发现问题在于配置的虚拟机网卡文件的网关打错了 ...

  10. IntelliJ IDEA 与 SVN配置

    问题背景 如果开发工具使用的是IntelliJ IDEA,版本管理工具使用的是SVN. 就涉及到SVN集成的问题,但是可能会遇到选择在IDEA中配置SVN的时候,在SVN的安装bin目录找不到文件 s ...