html5: 复制到剪贴板 clipboard.js-程序员宅基地

技术标签: 移动开发  

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

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
                    })
                }        

 

转载于:https://www.cnblogs.com/rachelch/p/10208318.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_33675507/article/details/94060535

智能推荐

CSS justify-content 属性_justify-content属性值-程序员宅基地

文章浏览阅读6.7w次,点赞40次,收藏267次。CSS 中的justify-content属性用于描述弹性盒子容器的对齐方式。它包含沿着分布在浏览器中的 flex 容器的主轴的内容项之间和周围的空间。注意:此属性不能用于沿垂直轴描述项目或容器。为了垂直对齐项目,我们可以使用align-items 属性在应用了 lengths 和 auto margins 属性后,对齐是可能的,即,如果在Flexbox 布局中至少有一个具有flex-grow 属性而不是 0 的灵活元素,那么它不会影响并且有任何影响不会有任何可用空间。句法:justi_justify-content属性值

JUC-CyclicBarrie(环形栅栏)_在 dc 中使用环形围栏库存-程序员宅基地

文章浏览阅读119次。CyclicBarrieCyclicBarrie与CountdownLatch相似,都可以用来模拟高并发场景,它可以用来阻塞每个线程,当满足某个条件之后释放线程,与CountdownLatch阻塞多个线程最后释放相似,例如显示生活中的开会,当所有人都到齐之后开始开会,每个线程都会执行阻塞之后也就是await方法之后的操作public static void main(String[] args) { final CyclicBarrier cyclicBarrier = new Cycl_在 dc 中使用环形围栏库存

进入页面获取不到audio/video属性值问题_获取不到audiooutput-程序员宅基地

文章浏览阅读1.3k次。有时候我们不用html5自带的视频/音频的控件,需要自定义, 这个时候可能就需要用到一些audio/video属性值。我们有个业务场景需要进入页面就获取音频的总时长, 但一直无法获取到,只有和页面产生交互才能获取,折腾了一段时间,总算解决了。 当音频/视频处于加载过程中时,会依次发生以下事件:loadstartdurationchangeloadedmetadataloadeddata..._获取不到audiooutput

谷歌浏览器无限添加快捷方式_谷歌浏览器快捷方式图标只有十个吗-程序员宅基地

文章浏览阅读2.8w次,点赞17次,收藏42次。博客简介在使用谷歌浏览器时,一般的我们最多只能添加10个快捷方式,但是这对于日常使用来说似乎还是少了点,如果您想要无上限的添加快捷方式,那么这篇博客会对您有所帮助。本篇博客介绍一个谷歌浏览器插件 infinity ,并且提供下载压缩包,可以自定义谷歌浏览器的快捷方式并且美化谷歌界面:infinity下载地址infinity安装步骤infinity使用方法infinity下载地址i..._谷歌浏览器快捷方式图标只有十个吗

2.Centos7相关Python安装_python 安装six-程序员宅基地

文章浏览阅读496次。编译Python3.9.21,进入https://www.python.org/ftp/python/3.9.2/选择相应的python版本2.安装 python 前的库环境yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-_python 安装six

让TC,BC程序脱离BGI运行_tc bc gem-程序员宅基地

文章浏览阅读780次。eCGUI-微型嵌入式GUI-图形界面系统(支持DOS 16/32bit,Linux,uC/OS等等)http://www.ecgui.com推荐开发工具 - Borland C/C++ 3.1 精简版本--------------------------------------------------最好直接解压在 D 盘,生成 d:/bc31 目录如果是其他目录,请修改 bin 目录下的t_tc bc gem

随便推点

RS232/UART_rs232为啥是负逻辑-程序员宅基地

文章浏览阅读866次。了解UART1.serial communication  Serial communication is a communication method that uses one or two transmission lines to send and receive data, and that data is continuously sent and received one b..._rs232为啥是负逻辑

SQL 统计日环比、周同比_日环比周同比-程序员宅基地

文章浏览阅读1.9w次,点赞8次,收藏30次。date gmv 2019-01-01 115.7 2019-01-02 180.1 2019-01-03 296.8 2019-01-04 706.0 2019-01-05 703.5 2019-01-06 527.3 2019-01-07 462.9 2019-01-08 270.1 2019-01-09..._日环比周同比

【Java-Bug】JDK没有javax.annotation.jar包解决方案,无法使用@Resource解决方案-程序员宅基地

文章浏览阅读2.9w次,点赞69次,收藏73次。高版本JDK没有javax.annotation.jar包解决方案,高版本JDK无法使用@Resource解决方案_javax.annotation

对象存储与块存储、文件存储等对比-程序员宅基地

文章浏览阅读471次。看到 一篇文档, 讲 对象存储, 好奇,搜索文章,摘抄,学习记录 !背景:传统存储在面对海量非结构化数据时,在存储、分享与容灾上面临很大的挑战,主要表现在以下几个方面:传统存储并非为非结构化内容设计或优化、成本过高、并非PB级的扩展、不支持永远在线、专有的一体机设备等等,非结构化数据以每年60%~80%的速率增长,从而可扩展性变成了最迫切的需求。传统存储在面对海量非结构化数据时,..._对象存储连接协议相比文件存储使用复杂。

下载官方 Win11、Win10 镜像 ISO 的方法_limbowin11镜像文件iso-程序员宅基地

文章浏览阅读1.2w次,点赞7次,收藏55次。下载官方 Win11、Win10 镜像 ISO 的方法下载 Windows 11下载 Windows 10安装 WindowsWindows 11 官方下载网址:https://www.microsoft.com/zh-cn/software-download/windows11Windows 10 官方下载网址:https://www.microsoft.com/zh-cn/software-download/windows10下载 Windows 11  下载 Windows 11 镜像 I_limbowin11镜像文件iso

AttributeError: ‘str‘ object has no attribute ‘shape‘_attributeerror: 'str' object has no attribute 'sha-程序员宅基地

文章浏览阅读1.1w次。出现错误:AttributeError: ‘str’ object has no attribute ‘shape’解决方案:将后面的result改为result.array_attributeerror: 'str' object has no attribute 'shape

推荐文章

热门文章

相关标签