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毫无反应 ...
随机推荐
- Centos7下安装Docker
1.首先卸载旧版: yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ ...
- JN_0001:在微信朋友圈分享时长大于10s的视频
1,先在聊天窗口里发送视频. 2,长按视频点击”收藏“. 3,进入微信收藏管理页面,播放视频. 4,点击右上角三点按钮,选择“转存为笔记”. 5,于是在收藏页面中会生成一个新的收藏笔记链接,打开链接再 ...
- 劫持 Opengl32.dll 实现游戏MOD
前提是你的游戏是用的Opengl,如果是DX的,自行谷歌方法,应该差不多,参考GTA5 最近玩了款<天命奇御>的国产网游,自己手动写了个MOD,本来是直接修改Chap-Assembly.d ...
- MacOS下好用的截图软件snip
1 官网下载,腾讯出的 https://snip.qq.com/ 2 下一步下一步安装就好,然后设置一下自己喜欢的快捷键,我的是command + control+J,选择自己喜欢的或者默认都可以 3 ...
- pow()函数结果强制转化为int造成误差的分析
开发环境:codeblocks,编译器gcc 在计算102时调用pow(10, 2),再强制类型转换为int类型后输出: printf(,)); 得到的结果却是:99 这是因为 double pow( ...
- codeblocks修改字体颜色-背景颜色
常用: 1. 编辑器背景-豆沙绿配置:色调85,饱和度123,亮度205: 2. 注释颜色-紫色:rgb(255,0,255): 参考: 改变codeblocks里面各种注释的颜色 常用颜色的RGB值 ...
- 在c:forEach与s:iterator里面使用if标签判断当前位置是否为2的倍数
在c:forEach与s:iterator里面使用if标签判断当前位置是否为2的倍数 c:forEach: <c:forEach var="workflow" items=& ...
- 开发portlet中的一些问题记录,portlet:resourceURL用法,portlet中通过processAction方法传值
在portlet页面中引入js或者css,通过c或者s标签 <!--jquery实际放的地方:/MyTask/WebContent/scripts/jquery-1.8.3.min.js--&g ...
- apache-jmeter-3.3的简单压力测试使用方法
注: 本文参考:http://www.cnblogs.com/TankXiao/p/4045439.html http://blog.csdn.net/lan_shu/article/details/ ...
- C#学习笔记-XML的读写(一)
需要解析的配置XML <?xml version="1.0" encoding="utf-8" ?> <configurations> ...