推广 热搜: page  数据  小红  红书  考试  论文  数据分析  关键词  哪些  搜索 

Clipboard.js : 移动端浏览器实现网页内容复制

   日期:2024-12-26     移动:https://sicmodule.kub2b.com/mobile/quote/13771.html

最近在项目中遇到这样一个需求:

 

 

 

 

github地址:https://github.com/zeroclipboard/zeroclipboard

 

复制原理:zeroClipboard利用透明的 flash 覆盖在复制按钮上,点击 flash,将复制内容传入到 flash 中,再通过 flash 把传入的内容写到剪贴板上

 

首先想到这个插件的原因是,之前在PC端的项目中使用过,兼容性很好,驾轻就熟,所以,先用它做了个demo

HTML

 

JAVAscript

 

使用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最新版,也无法实现在移动端浏览器进行文本复制。

 

 

 

 官网地址:https://clipboardjs.com/

 

 兼容性:

 虽然要求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,可以通过如下代码提示用户手动复制:

 

Safari版本在10以下的效果:

在 alert('请选择“拷贝”进行复制!') 之后,待复制的文字会自动选中,然后弹出系统本身的tooltip 

效果如下:

 

 

HTML:

 

JAVAscript:

  

 

 

近期很多朋友通过留言和邮件询问我,为什么在安卓手机上无法使用Clipboard.js来实现复制?

其实按照本文demo说明,是完全可以的;

只是很多朋友没有没有把待复制内容放在input输入框里,才导致在安卓手机上无法复制。

 

错误写法:

  

正确写法:

 

 

本文地址:https://sicmodule.kub2b.com/quote/13771.html     企库往 https://sicmodule.kub2b.com/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


0相关评论
相关最新动态
推荐最新动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号