核心內容
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>