html5: 复制到剪贴板 clipboard.js
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的更多相关文章
- Js 之复制到剪贴板 clipboard.js
一.下载 https://github.com/zenorocha/clipboard.js/archive/master.zip 二.Demo示例 <!DOCTYPE html> < ...
- 复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)
复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题) 相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能.但是由于各大浏览器的实现方案不一样,导致几 ...
- 移动端无法复制:使用clipboard.js碰到的一个小问题
移动端无法复制:使用clipboard.js碰到的一个小问题 直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...
- js实现剪切、复制、粘贴——clipBoard.js
摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过j ...
- 前端复制粘贴文字clipBoard.js的使用
1. vue 中的复制粘贴: <div class="mainTextItem" @click="copyTXTOne" id="copyOn ...
- JavaScript复制内容到剪贴板 clipboard.js
参考链接: https://github.com/axuebin/articles/issues/26#issuecomment-466337929
- 支付宝红包口令自动复制到剪贴板脚本js,安卓,IOS通用版
有客户找到涛舅舅,要求开发一个可以自动支付宝红包口令的js脚本,经过大量探索和优化,目前此脚本功能已经测试成功! 预期效果: 只要来访用户在当前网页的任意位置点击一下,支付宝红包口令即可复制到用户手机 ...
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- Clipboard.js – 现代方式实现复制文本到剪贴板
复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...
随机推荐
- POP邮件收取邮件 代码
// 111111.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <WinSock.h> #include ...
- [.NET] GC垃圾回收机制
前言: 在.NET程序开发中,为了将开发人员从繁琐的内存管理中解脱出来,将更多的精力花费在业务逻辑上,CLR提供了自动执行垃圾回收的机制来进行内存管理.开发人员甚至感觉不到这一过程的存在.CLR执行垃 ...
- Ansible 笔记 (1) - 安装和配置
本文参考 <Ansible 自动化运维和最佳实践>,这两天刚读这本书,写写总结.主控机环境是 centos 7,被控机均是 centos 6.8 . 确保 python 版本大于 2.6 ...
- UISearchDisplayController
// // FirstViewController.swift // SearchDisplayDemo // // Created by Bruce Lee on 24/12/14. // Copy ...
- phonegap/cordova学习建议
在技术群里面,一直有一些新人进来,问了一些让人可笑不得的问题.国内的资料相对比较少,而且很旧,都是一些2.X版本的资料.因此想写一些东西,帮助一下新人,让他们少走弯路. 首先说一些很多人问的问题,个人 ...
- Git管理
在bitbucket用git用法 核心流程:从远端中心repo那里git clone到本地,再在本地开发(add,commit),通常会利用branch管理,如果觉得code没问题了,就push到远端 ...
- Objective-C 学习笔记(二) 函数
Objective-C 函数 定义一个方法 在Objective-C编程的方法定义的一般形式如下: - (return_type) method_name:( argumentType1 )argum ...
- Cenots 7 Configure static IP
For example: # cd /etc/sysconfig/ifcfg-enp3s0 # cat ifcfg-enp3s0 TYPE=EthernetBOOTPROTO=staticIPADDR ...
- Spring学习(七)——开发Web Service的几种方式
本文作者在学习使用Java开发Web Service(不包括Restful)时,由于不知道Java有这么多框架支持开发Web Service一度陷入迷惘,不知道这些框架各有 什么不同,各有什么优缺点. ...
- solr特点五: MoreLikeThis(查找相似页面)
在 Google 上尝试一个查询,您会注意到每一个结果都包含一个 “相似页面” 链接,单击该链接,就会发布另一个搜索请求,查找出与起初结果类似的文档.Solr 使用MoreLikeThisCompon ...