Home  >  Article  >  Web Front-end  >  JavaScript implementation of copying content to the pasteboard code_javascript skills

JavaScript implementation of copying content to the pasteboard code_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:07:161813browse

I recently worked on a front-end project, in which there was a need to directly copy the values ​​​​in the input or textarea to the pasteboard through buttons. Below, the editor will share with you my implementation ideas and code, and you can directly introduce them into the project.

The specific code is as follows:

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;
}

We can call this method directly like this:

copyToClipboard(document.getElementById("name"));

In this way, the value with id name is entered into the pasteboard.

The editor will introduce you to the JavaScript code for copying content to the pasteboard here. I hope it will be helpful to you!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn