JavaScript implementation of copying content to the pasteboard code

JavaScript implementation of copying content to the pasteboard code_javascript skills

WBOY

Release： 2016-05-16 15:07:16

Original

1804 people have browsed it

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

Copy after login

We can call this method directly like this:

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

Copy after login

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!