移动端h5页面复制粘贴（兼容到ios9&安卓4.0.0）

最新推荐文章于 2024-07-09 16:46:58 发布

weixin_33730836

最新推荐文章于 2024-07-09 16:46:58 发布

阅读量1.6k

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：https://juejin.im/post/5d0aed60e51d45777540fdc2

版权

该博客围绕移动项目展开，项目使用jquery框架和纯h5，需实现上拉加载页面物流信息可复制粘贴，兼容ios9和安卓4.0.0。使用clipboard后在部分机型复制失败，因iscroll4屏蔽默认事件致长按无法弹出复制菜单，最终修改iscroll4源码解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目使用jquery框架
纯h5复制粘贴
解决了iscroll4阻止所有默认事件，长按无法弹出复制菜单

项目需要写一个上拉加载页面，页面中的物流信息需要可复制粘贴，同时需要兼容到ios9和安卓4.0.0, 经过大量搜索，最终使用clipboard。代码如下

<p class="wldh">物流单号：中通 123904040209
    <i class="copy copytkl_btn" data-clipboard-text="复制的内容" onclick="copyToBoard()">复制</i>
</p>
复制代码

function copyToBoard(mytext){
  var copyBtn = new ClipboardJS('.copy');
  copyBtn.on("success",function(e){
    mui.toast('复制成功', {});
    e.clearSelection();
  });
  copyBtn.on("error",function(e){
    //复制失败；
    mui.toast('复制失败,请长按复制', {});
	console.log( e.action );
  });
}
复制代码

效果如图

在安卓和ios主流机型都正常，但是在ios9和华为荣耀某些机型（安卓4.0.0）无法复制，弹出'复制失败，请长按复制'语句

解决方案{纯css可解决)

//长按复制内容一定要p标签
p的父元素{
    -webkit-user-select:text;
}
p{
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}
复制代码

但是页面使用了iscroll4（上拉加载），屏蔽了页面所有的默认事件导致长按无法弹出复制菜单。转换iscroll5的成本略高，且页面的流畅程度不如iscroll4。
根据www.bbsmax.com/A/6pdD1xjRzw 改了iscroll4源码，源码链接如下 https://pan.baidu.com/s/1LpIPyO5OqEZxHUrJ6C5Pcw 提取码: 1vbp

修改的页面如下

preventDefaultException:".wldh|.posdetail|.sqtime|.zftime"
复制代码

增加到上拉加载页面中

    //上拉加载
    if (document.getElementById("wrapper1") != null) {
		var myscroll = new iScroll("wrapper1", {
			preventDefaultException:".wldh|.posdetail|.sqtime|.zftime",
			onScrollMove: function () { //拉动时
				//上拉加载
				if (this.y < this.maxScrollY - 50) {
				$("#wrapper1 .pull-loading").html("释放加载");
				$("#wrapper1 .pull-loading").addClass("loading");
				} else {
				$("#wrapper1 .pull-loading").html("上拉加载");
				$("#wrapper1 .pull-loading").removeClass("loading");
				}
			},
			onScrollEnd: function (e) { //拉动结束时
				//上拉加载		
				if ($("#wrapper1 .pull-loading").hasClass('loading')) {
				$("#wrapper1 .pull-loading").html("加载中...");
				pullOnLoad1(); //调用方法获取数据
				}
			}
		});		
    }
复制代码