js實現文字的複製貼上的功能
阿新 • • 發佈:2019-01-03
本文介紹的js複製貼上功能的實現是藉助於textarea和document.execCommand來實現將文字複製到貼上板上,具體的程式碼如下:
<!DOCTYPE html>
<html>
<head>
<title>copy</title>
<style type="text/css">
.top {
width: 300px;
height: 200px;
position: absolute;
z-index : 2;
background: #fff;
overflow: hidden;
}
.bottom {
width: 300px;
height: 200px;
position: absolute;
z-index: 1;
overflow: hidden;
}
#btn {
height:30px;
text-align:center ;
border:1px #00a2ca solid;
cursor:pointer
};
#btn:hover {
background:#00a2ca;
color:#fff
};
</style>
<script type="text/javascript">
var copy = function(){
debugger;
var wrapper = document.getElementById("wrapper" );
var content = document.getElementById("content");
wrapper.value = content.innerHTML;
wrapper.select();
document.execCommand("Copy");
alert("複製成功!");
}
</script>
</head>
<body>
<!-- 通過遮罩將這個textarea隱藏起來,這樣就不會影響頁面的樣式了 -->
<div class="bottom">
<textarea id="wrapper">dasdas</textarea>
</div>
<div class="top">
<p id="content">dadasdasdas</p>
<span id="btn" onclick="copy()">複製</span>
</div>
</body>
</html>