H5实现一键复制功能ios不兼容问题

news/2024/7/20 20:05:34 标签: ios

上文使用的代码经过多个系统版本ios测试还是不生效,网上的方法都试过,ios手机还是不生效,就算demo生效,但是由于实际业务代码一些样式等影响或者其他原因,业务功能复制链接在ios手机还是显示不兼容,ios估计只能对于页面显示的内容进行复制,传值复制无法生效。无奈只能改成弹窗形式,再进行点击复制,使用的weui弹窗。需要引入weiui的js和css。

<script type="text/javascript" th:src="@{/weui/js/zepto.weui.js}"></script>
<script type="text/javascript" th:src="@{/weui/js/zepto.min.js}"></script>
<link rel="stylesheet" th:href="@{/weui/css/weui.css}"/>
<link rel="stylesheet" th:href="@{/weui/css/weuix.css}"/>

 引入weiui的弹窗,ios会有一个样式问题,弹窗会显示再页面的左侧,调整样式即可,根据自己实际情况调整

<style>        
        .weui-dialog{
			left: 50%;
			width: 80%;
		}
		.weui-dialog__hd {
			padding: 10px 24px 10px;
		}
		.weui-dialog__bd{
			margin-bottom: 10px;
			font-size: 13px;
		}
		.weui-dialog__ft{
			line-height: 46px;
			min-height: 46px;
		}
</style>
    <div class="btnBox">
		<button id="copy" class="btn btnRed btnSixeL" onclick="copyLink()">复制链接</button>
		<div id="backBtn" class="btn btnYes btnSixeL marTop20"  onclick="window.history.back()">返回</div>
	</div>

<script type="text/javascript">
function copyLink() {
			// 调用后端查询该id的有效链接,无效则后端生成返回
			const stockAuthId = $('input[name="radio"]:checked').val();
			if(isBlank(stockAuthId)){
				return layer.msg("请选择股东", {icon: 2},{time:1000});
			}
			$.showLoading("正在生成链接");
			// 查询linkUrl
			const url = pcs.common.path + 后端api接口;
			$.post(url,{},function(data){
				if(data.code === 200){
					$.hideLoading();
					copy(data.rs);
				}else{
					$.hideLoading();
					return layer.msg(data.msg, {icon: 2},{time:1000});
				}
			},'json');
        }

		function copy(text){
			if(navigator.clipboard){
				navigator.clipboard.writeText(text).then(function(){
					layer.msg("复制成功");
				},function(){
					copy2(text);
				});
			}else{
				copy2(text);
			}
		}

		function copy2(text){
			if((navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))){
                // ios系统
				$.modal({
					text: text,
					buttons: [{
						text: "点击复制", onClick: function(){
							finalCopy(text);
						}
					}]
				});
			}else {
                // 其他机型或者浏览器
				finalCopy(text);
			}
		}

		function finalCopy(text){
			const input = document.createElement("INPUT");
			input.value = text;
			input.className = "";
			document.body.appendChild(input);
			input.select();
			if (document.execCommand('copy')) {
				document.execCommand('copy');
				layer.msg("复制成功");
			}
			document.body.removeChild(input);
		}
</script>


http://www.niftyadmin.cn/n/874210.html

相关文章

python 条形图 stack_python用matplotlib画条形图初探‘单变量,双变量堆叠

一、包 python]view plain copy import numpy as np import matplotlib.pyplot as plt 二、单变量&#xff08;垂直&#xff09; [python]view plain copy y [5, 10, 15, 20, 25] index np.arange(len(y)) plt.bar(leftindex, heighty, colorr, width0.5) # 水平对应left&…

SpringBoot项目H5界面手机拍照调用腾讯云OCR卡证识别接口完整例子

最近一个微信端项目的功能涉及一个手机拍照上传身份证识别身份证信息回显的功能&#xff0c;调用的接口是腾讯云OCR的卡证识别功能。看了腾讯云的api通俗易懂&#xff0c;本地写好了demo测试可用。H5界面手机拍照调用后台方法保存身份证照片进行识别也可用&#xff0c;难度就在…

future.cancel不能关闭线程_结合多线程技术,实现客户端和服务端任意通讯的“聊天室”功能。...

一、实操名称&#xff1a;结合多线程技术&#xff0c;实现客户端和服务端任意通讯的“聊天室”功能。 二、项目信息 2.1作者&#xff1a;任鑫 2.2项目时长&#xff1a;3小时 2.3项目环境&#xff1a;JDK版本--1.8&#xff0c;操作系统--Windows7&#xff0c;eclipse 2.4项目涉及…

雷达成像技术_中国微波光子雷达成像分辨技术已达国际领先

“我们已经研制出微波光子雷达成像芯片&#xff0c;像砂粒一样小&#xff0c;比传统雷达设备小一万倍。它不仅可用于安全领域&#xff0c;在无人驾驶汽车等也可以大展身手。”4月27日&#xff0c;在2019全国微波光子雷达技术研讨会上&#xff0c;南京航空航天大学电子信息工程学…

python怎么显示汉字_Python在Matplotlib图中显示中文字体的操作方法

1. 说明 本篇主要针对在Ubuntu系统中&#xff0c;matplotlib显示不了中文的问题&#xff0c;尤其是在无法安装系统字体的情况下&#xff0c;解决Python绘图时中文显示的问题。 2. 在系统中安装字体 $ fc-list :langzh #查看中文字体名称及其安装路径&#xff0c;相对于英文字体…

用python turtle画人_家里蹲太孤单?用 Python 画一只单身狗

【CSDN编者按】这都快三月了&#xff0c;你复工没有&#xff1f;还是在家远程办公吗&#xff1f;省去了通勤时间的你&#xff0c;有木有觉得闲得慌&#xff1f;那就用Python画一只狗吧&#xff0c;还能娱乐还能学习&#xff0c;岂不美哉&#xff1f;点击播放 GIF 0.1M 作者 | E…

python list去重函数_Python对list列表结构中的值进行去重的方法总结

今天遇到一个问题&#xff0c;在同事随意的提示下&#xff0c;用了 itertools.groupby 这个函数。不过这个东西最终还是没用上。 问题就是对一个list中的新闻id进行去重&#xff0c;去重之后要保证顺序不变。 直观方法最简单的思路就是&#xff1a; ids [1,2,3,3,4,2,3,4,5,6,…

广域网访问局域网路由器设置_想换路由器不会操作?快来看看吧~

我在知乎上解答过很多重置完路由器之后不知道干嘛&#xff0c;或者操作完无法上网的&#xff0c;如果你也遇到这样的问题&#xff0c;那么答应我&#xff0c;把文章看完好嘛&#xff1f;路由器后面一般都有wan口和lan口&#xff0c;wan口为广域网接口&#xff0c;lan口为局域网…