核心内容
document.execCommand("Copy");//需要手动触发,且是同步操作
//被复制的元素必须是常规文本框,不想影响布局,可以使用透明度.disable或者type="hidden"均失效
展示图片
代码实现
<!-- 样式 -->
<style>
ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
li {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
height: 50px;
}
li a {
text-decoration: none;
color: #333;
display: block;
width: 100%;
height: 100%;
line-height: 50px;
padding: 0 50px;
position: relative;
}
li:nth-child(2n) {
background: #eee;
}
li:nth-child(2n-1) {
background: #ddd;
}
li a span {
position: absolute;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
right: 100px;
top: 0px;
}
.shade_box {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
}
.shade_box .share_con {
width: 760px;
height: 340px;
background: #fff;
margin: 100px auto;
padding: 20px;
}
.shade_box .share_con p {
color: #09aaff;
}
.link {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.link_value {
width: 348px;
height: 37px;
border: 1px solid #e9e9e9;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
}
.link_value input {
border-radius: 4px;
padding: 8px;
background: none;
outline: none;
border: 0px;
/* width: 60%; */
}
.link_value span {
position: relative;
padding-right: 8px;
}
.link_value span::before {
content: "";
height: 100%;
width: 1px;
background: #e9e9e9;
position: absolute;
left: -5px;
top: 0;
}
.close {
text-decoration: none;
color: #333;
display: block;
margin-top: 50px;
border: 1px solid #c3eaff;
border-radius: 4px;
width: 90px;
height: 32px;
line-height: 32px;
font-size: 14px;
text-align: center;
color: #09aaff;
}
#copyTargetNum {
width: 68px;
height: 19px;
line-height: 18px;
padding: 8px;
border: 1px solid #e9e9e9;
border-radius: 4px;
display: inline-block;
margin-left: 5px;
}
</style>
<!-- 布局 -->
<body>
<ul>
<li>
<a href="javascript: ;" data-shareUrl="share_some_move"
>电影<span onclick="toShare(this)">₪</span></a
>
</li>
<li>
<a href="javascript: ;" data-shareUrl="share_some_tv"
>电视剧<span onclick="toShare(this)">₪</span></a
>
</li>
<li>
<a href="javascript: ;" data-shareUrl="share_some_arts"
>综艺<span onclick="toShare(this)">₪</span></a
>
</li>
<li>
<a href="javascript: ;" data-shareUrl="share_some_fiction"
>小说<span onclick="toShare(this)">₪</span></a
>
</li>
</ul>
<!-- 分享弹框 -->
<div class="shade_box" style="display: none;">
<div class="share_con">
<p>成功创建私密链接</p>
<div class="link">
<div class="link_value">
<input id="copyTarget" type="text" /><span>链接7天后失效</span>
</div>
<button onclick="copy()">复制链接及提取码</button>
<input type="text" style="opacity: 0;" id="copyVlue" />
</div>
<div>提取码<input id="copyTargetNum" type="text" value="" /></div>
<a class="close" href="javascript: ;">关闭</a>
</div>
</div>
</body>
<!-- 代码 -->
<script>
function toShare(parentHref) {
var num = "";
for (var i = 0; i < 4; i++) {
num += Math.floor(Math.random() * 10);
}
document.getElementById("copyTargetNum").value = num;
document.getElementById("copyTarget").value = parentHref.parentNode.getAttribute("data-shareUrl");
document.getElementsByClassName("shade_box")[0].style.display = "block";
}
document.getElementsByClassName("close")[0].onclick = function() {
// console.log("aaa");
document.getElementsByClassName("shade_box")[0].style.display = "none";
};
var copy = function() {
var wrapper = document.getElementById("copyVlue");
var str = document.getElementById("copyTarget").value + " 提取码" + document.getElementById("copyTargetNum").value;
//console.log(str);
wrapper.value = str;
wrapper.select();
document.execCommand("Copy");
alert("复制成功!");
};
</script>