PC、手机端可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS 复制功能</title>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<style>
/*----样式初始化----------------------*/
html {
height: 100%;
}
body {
font-family: "微软雅黑";
background: #fff;
-webkit-text-size-adjust: 100%;
/*解决Iphone下橱窗字体变大问题*/
width: 100%;
height: 100%;
}
* {
padding: 0;
margin: 0;
border: 0;
font-style: normal;
font-weight: normal;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/*禁止链接高亮*/
-webkit-touch-callout: none;
/*禁止链接长按弹出选项菜单*/
}
ul {
list-style: none;
}
a:link {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/*禁止链接高亮*/
-webkit-touch-callout: none;
/*禁止链接长按弹出选项菜单*/
}
a:link,
a:visited,
a:hover,
a:active {
color: #000;
text-decoration: none;
}
@media screen and (min-width: 1024px) {
body,
.topNav,
.topNav_popup,
.container {
max-width: 667px;
margin: 0 auto;
}
#hos {
width: 100% !important;
height: 700px;
}
}
.wrap {
width: 100%;
padding: 50px 0 20px;
font-size: 16px;
text-align: center;
background-color: #fff;
box-sizing: border-box;
}
.wrap .title {
height: 34px;
line-height: 30px;
font-size: 18px;
font-weight: bold;
color: #333;
}
.wrap .content {
color: #666;
}
.wrap .btn {
margin-top: 20px;
}
.wrap .btn button {
width: 200px;
height: 34px;
line-height: 34px;
font-size: 16px;
text-align: center;
color: #fff;
background-color: #ba050e;
border-radius: 6px;
}
.copySuc {
display: none;
position: absolute;
top: 40px;
left: calc(50% - 75px);
width: 150px;
height: 36px;
font-size: 14px;
text-align: center;
line-height: 36px;
border-radius: 2px;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<div class="wrap">
<div class="title">请用电脑打开以下网址</div>
<p class="content">https://super.9453job.com</p>
<div class="btn">
<button onclick="copyFunction(this)" data-website="https://super.9453job.com">复制网址</button>
</div>
</div>
<div class="copySuc">
<div>成功复制了哦~</div>
</div>
</body>
<script>
// data是需要复制的内容
function copyFunction(self) {
var timer = null;
clearTimeout(timer);
var data = self.getAttribute('data-website');
console.log(data);
let copyInput = document.createElement("input"); //创建input元素
document.body.appendChild(copyInput); //向页面底部追加输入框
copyInput.setAttribute("value", data); //添加属性,将需要复制的内容赋值给input元素的value属性
copyInput.select(); //选择input元素
var res = document.execCommand("Copy", false, null); //执行复制命令(指令参数, 交互方式参数如果是true的话将显示对话框, 动态参数一般为一可用值或属性值)
//复制之后再删除元素,否则无法成功赋值
document.body.removeChild(copyInput);//删除动态创建的节点
document.getElementsByClassName("copySuc")[0].style.display = "block"
timer = setTimeout(function copySucHide() {
document.getElementsByClassName("copySuc")[0].style.display = "none"
}, 1000);
return res;
}
</script>
<script>
//jq
// data是需要复制的内容
function copyFunction(self) {
var timer = null;
clearTimeout(timer);
var data = $("button").attr("data-website")
console.log(data);
var copyInput = $("<input>");
$("body").append(copyInput);
console.log(copyInput);
$(copyInput).attr("value", data)
copyInput.select();
var res = document.execCommand("Copy", false, null);
$(copyInput).remove();
$(".copySuc").css("display", "block")
timer = setTimeout(function copySucHide() {
$(".copySuc").css("display", "none")
}, 1000);
}
</script>
</html>