移动端复制文本到剪贴本然后唤起微信复制在安卓和ios的兼容性
<div class="fixedwxq" id="fixedwxq1">
<img src="http://img.ftp.tj.dyrs.com.cn/a6/gdpyyd/qun.png" class="img" />
<input type="text" name="" id="wxnum" class="wxnum" value="dongyi2713" />
<button type="button" id="" class="copywx" value=""></button>
<div class="wxq_x iconfont icon-chahao"></div>
</div>
.fixedwxq {
position: absolute;
top: 50%;
left: 50%;
width: 6.4rem;
height: 8.56rem;
transform: translate(-50%, -50%);
font-size: 0;
z-index: 900;
padding-bottom: 1.2rem;
}
.fixedwxq .wxq_x {
position: absolute;
left: 50%;
bottom: 0;
color: #fff;
font-size: 40px;
transform: translate(-50%, 0%);
}
.fixedwxq input {
position: absolute;
left: 1000%;
height: 2px;
}
.fixedwxq .copywx {
position: absolute;
width: 100%;
height: 0.84rem;
background-color: transparent;
left: 0;
bottom: 1.96rem;
border: 0 none;
z-index: 910;
color: transparent;
}
//判断用户使用的设备
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
var systemFlag = "";
//要先判断当前是什么系统,否则会报错,无法执行语句
if(isAndroid) {
systemFlag = "android";
} else {
systemFlag = "ios";
}
$(document).on("click", ".copywx", function() {
//这里是页面中引用的弹框插件 layer,把回调函数写在第三个参数的位置,事件处理完成之后手动关闭弹框
var ind = layer.alert("复制成功,请前往微信添加", {
icon: 1,
title: ''
}, function(ind) {
if(systemFlag == "android") {
//android复制
//只需要改变取值方式即可
$("#wxnum").select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
window.location.href = 'weixin://';//唤起微信,移动端自带浏览器可以,从百度app打开不能唤起微信,此问题目前没有解决
} else {
//IOS复制
var input = document.createElement("input");
//只需要改变取值方式即可
input.value = $("#wxnum").val();
input.setAttribute("class", "wxnum");//给添加的input添加类名,添加样式不在页面中显示,不然页面中回闪一下,
document.getElementById("fixedwxq1").appendChild(input);//input添加到父元素中
input.select();
input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
document.getElementById("fixedwxq1").removeChild(input);
window.location.href = 'weixin://';//ios唤起微信也是自带浏览器可以,但是百度app不能唤起
}
layer.close(ind);
$(".fixedbg").hide();
});
})