Clipboard.js : 移动端浏览器实现网页内容复制
最近在项目中遇到这样一个需求:
方案一:zeroClipboard.js
github地址:https://github.com/zeroclipboard/zeroclipboard
复制原理:zeroClipboard利用透明的 flash 覆盖在复制按钮上,点击 flash,将复制内容传入到 flash 中,再通过 flash 把传入的内容写到剪贴板上
首先想到这个插件的原因是,之前在PC端的项目中使用过,兼容性很好,驾轻就熟,所以,先用它做了个demo
HTML
<input type="text" name="" id="iUrl" value="https://github.com/zeroclipboard/zeroclipboard">
<button id="copyUrlBtn">复制链接</button>
JAVASCRIPT
(function(){
var btn = document.getElementById('copyUrlBtn'),
text = document.getElementById('iUrl'),
zc = new ZeroClipboard(btn);
zc.on('beforecopy', function(e){
zc.setText(text.value);
});
btn.onclick = function(){
alert('已复制');
}
})();
使用zeroClipboard.js需要注意以下两点:
1# ZeroClipboard.swf 和 ZeroClipboard.min.js 需在同一目录结构下, ZeroClipboard.swf无需调用,只需在页面中引用ZeroClipboard.min.js 即可;
2# 测试复制功能需在服务器环境,可以是简单的本地服务器,如:http://localhost:8000/xx
测试结果:
在PC端浏览器上测试,功能正常;但是在ios上,无论是QQ浏览器,还是Safari浏览器都无法实现复制功能。
可能由于Flash技术正被各大浏览器厂商冷落,所以,截止到目前ZeroClipboard.js最新版,也无法实现在移动端浏览器进行文本复制。
方案二:Clipboard.js
兼容性:
虽然要求Safari版本在10以上,但是作者做了很好的优雅降级:
The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.
也就是说,Safari版本是10以上的,可以直接成功复制;如果是版本小于10,可以通过如下代码提示用户手动复制:
clipboard.on('error', function(e) {
alert('请选择“拷贝”进行复制!')
});
Safari版本在10以下的效果:
在 alert('请选择“拷贝”进行复制!') 之后,待复制的文字会自动选中,然后弹出系统本身的tooltip
效果如下:
DEMO:
HTML:
<!-- Target -->
<input id="foo" value="http://www.968309.com/mobile.php"> <!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">复制</button>
JAVASCRIPT:
//init
var clipboard = new Clipboard('.btn');
//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后,手动选择“拷贝”进行复制
clipboard.on('success', function(e) {
alert('复制成功!')
e.clearSelection();
});
clipboard.on('error', function(e) {
alert('请选择“拷贝”进行复制!')
});
2017/08/25 后续补充:
近期很多朋友通过留言和邮件询问我,为什么在安卓手机上无法使用Clipboard.js来实现复制?
其实按照本文demo说明,是完全可以的;
只是很多朋友没有没有把待复制内容放在input输入框里,才导致在安卓手机上无法复制。
错误写法:
<p id="foo">这里是需要复制的文本</p>
正确写法:
<input type="text" id="foo" value="这里是需要复制的文本"/>
2018/05/14 更新:我的小程序【阳光投票】已上线,欢迎大家体验建议!
Clipboard.js : 移动端浏览器实现网页内容复制的更多相关文章
- clipboard.js 实现动态获取内容并复制到剪切板
使用clipboard.js分为以下几个步骤: 1.引入一个clipboard.js的文件: 2.新建一个clipboard对象: 3.点击按钮获取目标对象里面的内容,将其复制到剪切板. 注意:1.目 ...
- JS移动端浏览器取消右划后退的几种方法
在开发过程中,发现我们公司所使用的APP有点BUG,在APP中打开网页.H5应用之后,处于首页时,轻微的右划触发了后退事件,导致直接退出网页或者H5应用的页面,这样使得很多需要交互的手势没办法使用.本 ...
- clipboard.js一个可以在移动端一键复制的插件
网址:https://clipboardjs.com/ 使用方法: 1.引入js <script src="dist/clipboard.min.js"></sc ...
- 移动端无法复制:使用clipboard.js碰到的一个小问题
移动端无法复制:使用clipboard.js碰到的一个小问题 直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...
- 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓
<!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...
- 解决clipboard.js在移动端复制失败的问题
1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...
- js实现点击复制网页内容(基于clipboard.js)
浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...
- h5微信浏览器复制粘贴--ios兼容问题的解决方法(clipboard.js插件)
前段时间在做微信h5的时候,遇到了ios兼容,使用clipboard.js插件完美解决 下载地址:下载地址: https://github.com/zenorocha/clipboard.js cnd ...
- 前端技术之:如何在Vue中使用clipboard.js复制服务端数据
第一步 创建点击对象页面元素,并绑定业务数据. <el-button type="text" size="mini" class="copy-b ...
随机推荐
- Overload和Override的区别?
Overload和Override的区别? Override是重写:方法名称.参数个数,类型,顺序,返回值类型都是必须和父类方法一致的.它的关系是父子关系Overload是重载:方法名称不变,其余的都 ...
- MVC3中 ViewBag、ViewData和TempData的使用和区别(不是自己写的)
(网上抄的,并未消化)在MVC3开始,视图数据可以通过ViewBag属性访问,在MVC2中则是使用ViewData.MVC3中保留了ViewData的使用.ViewBag 是动态类型(dynamic) ...
- iOS学习笔记(十四)——打电话、发短信
电话.短信是手机的基础功能,iOS中提供了接口,让我们调用.这篇文章简单的介绍一下iOS的打电话.发短信在程序中怎么调用. 1.打电话 [[UIApplication sharedApplicatio ...
- 如何修改UITableView每个cell的分隔线和左边的距离?
在ios7中,UITableViewCell左侧会有默认15像素的空白.这时候,设置setSeparatorInset:UIEdgeInsetsZero 能将空白去掉.但是在ios8中,设置setSe ...
- 设置Imindmap默认字体
创建一个新的字体样式 根据如下步骤创建新的字体样式: 1.打开一个mindmap,选中工具栏上的 [样式][Styles ]. 2.选择 Font > Create New Font Optio ...
- USACO5.4-TeleCowmunication
题目大意:给出一个无向图,要求删除尽量少的点,使给定的2点间不再连通,并输出字典序最小的方案题型:图论-网络流此题难点在于建图,后面就是套网络流的模板.将点看成边,例如第i个点可以看成一条有向边< ...
- openstack nova数据库计算结点IP地址
最近遇到一个问题就是在控制结点上查找nova数据库中 select * from compute_nodes\G;中出现IP地址一直是127.0.0.1不是计算结点的IP,就算修改成计算结点的IP,也 ...
- Zsh安装CMake补全脚本进行CMake命令补全
最近在尝试使用Zsh,发现其补全命令的功能相当厉害.但对CMake命令的补全在默认的5.0.5中好像没有看到,网上找了下关于配置Zsh补全的文章也没有多少. 于是自己动手,发现在Zsh安装目录 ...
- Nginx源码研究六:NGINX的配置文件分析
上一篇写到nginx的各个模块的配置信息的存储结构,大体描述了对配置信息的配置项生成,定制,初始化过程.这里重点研究实现定制的过程,所谓实现定制,这里指的是,nginx系统提供使用者定义nginx的配 ...
- css 属性之绝对定位
<html><head><style type="text/css">h2.pos_abs{position:absolute;left:100 ...