<html>
<head>
<title>Demo</title>
<style>
.textarea-container {
position: relative;
margin-left: 30%;
}
.textarea-container textarea {
50%;
height: 50%;
box-sizing: border-box;
}
.textarea-container button {
position: absolute;
bottom: 2%;
right: 51%;
font-size: 10px;
50px;
line-height: 1.42857143;
text-align: center;
border: 1px solid transparent;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="textarea-container">
<textarea name="foo" id="write">请输入一些文字</textarea>
<button onclick="copy()">复制</button>
</div>
<script>
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch (e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}
function copy() {
copyToClipboard(document.getElementById("write"));
alert("复制成功！");
}
</script>
</body>
</html>
