clipboard.js一个可以在移动端一键复制的插件
网址:https://clipboardjs.com/
使用方法:
1、引入js <script src="dist/clipboard.min.js"></script>
2、每一个需要复制或者操作的元素都需要new一个实例
3、三种方式实现复制
- 复制input元素里内容,input不能隐藏,type不能设置为hidden,否则无效
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger -->
<button style="width:100px;height:50px" value="复制" data-clipboard-target="#foo">
</button>
var copyBtn= new ClipboardJS('.btn');
- 直接将需要复制的元素写在button 中
<button class="btn" data-clipboard-text="需要复制的内容">
复制
</button>var copyBtn= new ClipboardJS('.btn'); - 写在代码中
<button class="btn" aria-label="需要复制的内容">
复制
</button>
var copyBtn= new ClipboardJS('.btn', {
text: function (trigger) {
return trigger.getAttribute('aria-label');
}
});
iphone只支持safari10+,有些移动端使用方式1,2无效时,可试试方式3
clipboard.js一个可以在移动端一键复制的插件的更多相关文章
- 使用clipboard.js实现复制内容至剪贴板
下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...
- 移动端无法复制:使用clipboard.js碰到的一个小问题
移动端无法复制:使用clipboard.js碰到的一个小问题 直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...
- clipboard.js操作剪贴版——一些移动端交互和兼容经验
https://github.com/zenorocha/clipboard.js 库,真的是个好库,而且不依赖flash,几乎完美支持移动端.但是,移动端应用有些不趟不知的小tip,这里归档下. 原 ...
- Clipboard.js : 移动端浏览器实现网页内容复制
.bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size ...
- 解决clipboard.js在移动端复制失败的问题
1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...
- 一款给力的一键复制js插件-clipboard.js
一款没有依赖的.给力的一键复制的JS插件 点我前往github 案例demo见下载包内demo文件夹. 这里晒出最常用的几种方式,以供不时之需. <!DOCTYPE html> < ...
- 前端技术之:如何在Vue中使用clipboard.js复制服务端数据
第一步 创建点击对象页面元素,并绑定业务数据. <el-button type="text" size="mini" class="copy-b ...
- 使用clipboard.js复制页面内容到剪切板
最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...
- clipboard.js兼容ios
再使用clipboard.js做项目时,项目需求是在非input,button等可以点击的标签(span,p,div)上实现点击来复制内容,在PC端和移动端android没问题,但是到了ios毫无反应 ...
随机推荐
- 收藏这些Safari快捷键,让你的Mac浏览网页更加方便
文章内容及图片来源于:知乎,如果涉及版权问题,请联系作者删除 文章收录于:风云社区(提供上千款各类mac软件的下载) Safari是Mac上的原生浏览器,功能自然很强大,现在每天在Mac上使用的最多的 ...
- 【SVN】svn 查看项目的 svn 服务器地址目录(脱机状态下)
#事故现场: 在无法连接到svn服务器地址的情况下,查看本地项目的svn的服务器地址目录: #事故分析 因为无法连接svn服务器,所以只能通过svn在本地存储的信息来获取svn的地址路径信息: #解决 ...
- HDU 1584(蜘蛛牌 DFS)
题意是在蜘蛛纸牌的背景下求 10 个数的最小移动距离. 在数组中存储 10 个数字各自的位置,用深搜回溯的方法求解. 代码如下: #include <bits/stdc++.h> usin ...
- 【转载】c++类的实例化与拷贝
https://www.cnblogs.com/chris-cp/p/3578976.html c++的默认拷贝构造函数,从深度拷贝和浅拷贝说起: https://blog.csdn.net/qq_2 ...
- 学习python笔记 协程
下面将一个经典的消费者和生产者的案例进行分析: import time def consumer(): r = '' while True: n = yield r if not n: return ...
- python常用校验方法总结
0x00 校验一个字符串是否是合法IP地址 ipv4举例:利用正则表达式来匹配 def checkip(ip): p = re.compile('^((25[0-5]|2[0-4]\d|[01]?\d ...
- 爬虫工程师JD归纳
核心能力归纳 负责:多平台信息的抓取,清洗和分析工作 要求: 熟悉常用开源爬虫框架,如 scrapy / pyspider 了解基于Cookie的登录原理,熟悉常用的信息抽取技术,如正则表达式.XP ...
- Django之权限
关于rbac: (1) 创建表关系: class User(models.Model): name=models.CharField(max_length=32) pwd=models.CharFie ...
- fiddler启用过滤规则只显示想要的接口数据
fiddler启用过滤规则只显示想要的接口数据 比如只显示192.168.11.80站点数据 点击应用规则就可以只显示192.168.11.80了
- 【原创】大叔经验分享(6)Oozie如何查看提交到Yarn上的任务日志
通过oozie job id可以查看流程详细信息,命令如下: oozie job -info 0012077-180830142722522-oozie-hado-W 流程详细信息如下: Job ID ...