Snippet JS copy to clipboard full support old browser and modern browser
Snippet fallback copy to clipboard for old browser
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand("copy");
var msg = successful ? "successful" : "unsuccessful";
console.log("Fallback: Copying text command was " + msg);
} catch (err) {
console.error("Fallback: Oops, unable to copy", err);
}
document.body.removeChild(textArea);
}
Snippet copy to clipboard for modern browser
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(
function () {
console.log("Async: Copying to clipboard was successful!");
},
function (err) {
console.error("Async: Could not copy text: ", err);
}
);
}
Usage copy to cliboard Snippet
copyTextToClipboard('Text to copy');
Full Example copy to clipboard javascript and html
<div style="display: inline-block; vertical-align: top">
<button class="js-copy-1-btn">Set clipboard</button><br /><br />
<button class="js-copy-2-btn">Set clipboard</button>
</div>
<div style="display: inline-block">
<textarea class="js-test-textarea" cols="35" rows="4">
Paste here (CTRL+V or HOLD, touch and paste) to see what's on your clipboard.
</textarea>
</div>
<script>
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand("copy");
var msg = successful ? "successful" : "unsuccessful";
console.log("Fallback: Copying text command was " + msg);
} catch (err) {
console.error("Fallback: Oops, unable to copy", err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(
function () {
console.log("Async: Copying to clipboard was successful!");
},
function (err) {
console.error("Async: Could not copy text: ", err);
}
);
}
var copyBobBtn = document.querySelector(".js-copy-1-btn"),
copyJaneBtn = document.querySelector(".js-copy-2-btn");
copyBobBtn.addEventListener("click", function (event) {
copyTextToClipboard("Text 1 to be copied");
});
copyJaneBtn.addEventListener("click", function (event) {
copyTextToClipboard("Text 2 to be copied");
});
</script>
Live DEMO copy to clipboard
All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.