实现代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<title>js兼容安卓和ios实现粘贴板一键复制</title>
<style>
html {
color: #;
background: #fff;
overflow-y: scroll;
-webkit-text-size-adjust: %;
-ms-text-size-adjust: %;
} html * {
outline: ;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: transparent
} * {
margin: ;
padding:
}
.content {
width: 78.7%;
height: .093rem;
margin: auto;
background: url('./xxxxxx.png');
background-size: % %;
margin-top: %;
}
.onebox{
height: .907rem;
}
.midtext{
font-family: PingFangSC-Regular;
font-size: 12px;
color: #4FA3FF;
letter-spacing: ;
text-align: left;
width: %;
padding-top: .0rem;
margin: auto;
}
.bottbox{
text-align: center;
font-size: ;
margin-top: .693rem;
}
.one-copy{
width: .467rem;
height: .853rem;
} /*小弹窗*/
#message{
width: %;
height: .8rem;
line-height: .8rem;
bottom: %;
font-size: 12px;
color: #fff;
z-index: ;
box-shadow: 1px 14px rgba(,,,.);
opacity: ;
visibility: hidden;
-webkit-transform: translateX(-%);
-ms-transform: translateX(-%);
transform: translateX(-%);
text-align: center;
border-radius: .8rem;
}
#message.show {
visibility: visible;
}
#message {
position: fixed;
background: rgba(,,,.);
left: %;
}
#msgTxt{
line-height:.55rem;
height: .1rem;
}
.show {
display: block!important;
}
</style> </head>
<script type="text/javascript">
document.getElementsByTagName("html")[].style.fontSize = (window.innerWidth / ) + "px";
</script> <body>
<div class="content">
<div class="onebox">
<div class="midtext">https://ahhahahahhahahah</div>
</div>
<div class="bottbox"><img src="./ccccccc.png" class="one-copy" id="one-copy" onclick="copy()"></div>
</div>
<!-- 弹窗组件 -->
<div id="message" class="show">
<p id="mytext"></p >
</div>
</body>
<script type="text/javascript">
//兼容安卓和ios实现剪切板复制的方法
function copy() {
var message="https://ajskajskajskajskjaskajksjka";
var input = document.createElement("input");
input.value = message;
document.body.appendChild(input);
input.select();
input.setSelectionRange(, input.value.length), document.execCommand('Copy');
document.body.removeChild(input);
//一键复制按钮变浅
document.querySelector("#one-copy").style.opacity='0.5';
//复制成功提示
toast('复制成功');
} //弹窗组件
function toast(message) {
var timer;
document.querySelector("#message").style.opacity='';
document.getElementById('mytext').innerHTML=message; clearTimeout(timer); timer = setTimeout( ()=> {
document.querySelector("#message").style.opacity='';
}, ); }
</script>
</html>
略。