HTML5实现移动端复制功能

所属分类: 网页制作 / html5 阅读数: 480
收藏 0 赞 0 分享

首先遇到这个需求是就各种百度,但是发现基本都是用js实现,而且兼容性还非常不好。

但是在寻觅和尝试的过程中,发现只需要css代码也可以完全实现的,对需要复制内容的标签加上下面这几行代码就可以了。

-webkit-touch-callout: all;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;

其实意思就是不限制用户对内容的操作,不禁用系统默认菜单,长按会显示系统自带的复制功能进行复制。

使用clipboard.js实现移动端粘贴复制

clipboard.js是一款很强大的粘贴复制的插件,但是在移动端使用,会出现兼容性问题。下面是我常使用的一种解决方案。

html

<input id="foo1"  value="http://www.shellad.com/_2SP__22(要复制的内容)" readonly="readonly">
<div class="the_btn_con"><button class="btn" data-clipboard-target="#foo1">复制</button></div>

js

$(function () {
       var clipboard = new Clipboard('.btn');
       //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后,手动选择“拷贝”进行复制
       clipboard.on('success', function(e) {
           alert('复制成功!')
           console.log($(this))
           e.clearSelection();
       });
       clipboard.on('error', function(e) {
           alert('请选择“拷贝”进行复制!')
       });
   })

注意我在保存要复制的内容时使用的是input控件,而不是div或者span。因为,在测试时只有input的兼容性最好,不会出现问题,能够保证正常复制。同时,该插件也不支持safari 版本号<10,所以要做好提示。
 

以上所述是小编给大家介绍的HTML5实现移动端复制功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

HTML5 Canvas锯齿图代码实例

这篇文章主要介绍了HTML5 Canvas锯齿图代码实例,需要的朋友可以参考下
收藏 0 赞 0 分享

html5图片上传预览示例分享

这篇文章主要介绍了html5图片上传预览示例,需要的朋友可以参考下
收藏 0 赞 0 分享

html5的canvas元素使用方法介绍(画矩形、画折线、圆形)

HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
收藏 0 赞 0 分享

使用html5制作loading图的示例

这篇文章主要介绍了使用html5制作loading图的示例,需要的朋友可以参考下
收藏 0 赞 0 分享

html5读取本地文件示例代码

这篇文章主要介绍了html5读取本地文件的具体实现,html结构样式、Css样式及js代码如下,需要的朋友可以看看哦
收藏 0 赞 0 分享

html5菜单折纸效果

这篇文章主要介绍了html5菜单折纸效果,类似猎豹浏览器安装时的用户须知效果,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5添加鼠标悬浮音响效果不使用FLASH

使用HTML5+jQuery添加鼠标悬浮音响效果,兼容Firefox 3.5+, Chrome 3+等等,使用html5的audio元素,随机播放一个mp3音效,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5中的Scoped属性使用实例

HTML5的变革给我们带来了大量非常有用的新属性,比如placeholder, download, hidden,等等。每一种新属性都给我们带来了对页面元素新的控制方法和控制效力
收藏 0 赞 0 分享

HTML5的hidden属性兼容老浏览器的方法

HTML5给我们带来了很多非常简单但却非常强大的HTML属性:placeholder, download, and autofocus,等等
收藏 0 赞 0 分享

html5基础标签(html5视频标签 html5新标签用法)

html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧
收藏 0 赞 0 分享
查看更多