Copy DOM content to the clipboard with pure Javascript
Thu, Feb 15 2018, 09:58 Javascript, jQuery, programming, RapidWeaver, Webserver PermalinkOf all the tips on the internet on how to copy data from a DOM element to the clipboard, I compiled my own function(s).
The examples below are to copy the 'href'-part of a link to an RSS feed to the clipboard.
1. By class name, use the first found element
2. By id
RSS feed link example with a class and an ID, using FontAwesome icons :
<a class="blog-rss-link" href="https://macvos.blogspot.com/feeds/posts/default" rel="alternate" target="_blank" title="RSS Feed" type="application/rss+xml"><i class="fa fa-rss"> RSS Feed <i class="fa fa-copy" onclick="copyToClipboardCN('blog-rss-link', 'href')" style="cursor: pointer;" title="Copy RSS link to clipboard">
<a id="blog-rss-link" href="https://macvos.blogspot.com/feeds/posts/default" rel="alternate" target="_blank" title="RSS Feed" type="application/rss+xml"><i class="fa fa-rss"> RSS Feed <i class="fa fa-copy" onclick="copyToClipboardID('blog-rss-link', 'href')" style="cursor: pointer;" title="Copy RSS link to clipboard">
I have thought about combining the two functions into one, but i find that dangerous. In case you don't, here it is:
The examples below are to copy the 'href'-part of a link to an RSS feed to the clipboard.
1. By class name, use the first found element
function copyToClipboardCN(element, attr) {
x = document.getElementsByClassName(element);
if(x !== undefined && x !== null && x[0] !== undefined) {
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
textarea.value = x[0][attr];
textarea.select();
var status = document.execCommand('copy');
textarea.remove();
}
}
2. By id
function copyToClipboardID(element, attr) {
x = document.getElementById(element);
if(x !== undefined && x !== null) {
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
textarea.value = x[attr];
textarea.select();
var status = document.execCommand('copy');
textarea.remove();
}
}
RSS feed link example with a class and an ID, using FontAwesome icons :
<a class="blog-rss-link" href="https://macvos.blogspot.com/feeds/posts/default" rel="alternate" target="_blank" title="RSS Feed" type="application/rss+xml"><i class="fa fa-rss"> RSS Feed <i class="fa fa-copy" onclick="copyToClipboardCN('blog-rss-link', 'href')" style="cursor: pointer;" title="Copy RSS link to clipboard">
<a id="blog-rss-link" href="https://macvos.blogspot.com/feeds/posts/default" rel="alternate" target="_blank" title="RSS Feed" type="application/rss+xml"><i class="fa fa-rss"> RSS Feed <i class="fa fa-copy" onclick="copyToClipboardID('blog-rss-link', 'href')" style="cursor: pointer;" title="Copy RSS link to clipboard">
I have thought about combining the two functions into one, but i find that dangerous. In case you don't, here it is:
function copyToClipboard(element, attr) {
var x = document.getElementById(element);
if(x === undefined || x === null) {
x = document.getElementsByClassName(element);
if(x !== undefined && x !== null && x[0] !== undefined) {
x = x[0];
}
else {
x = undefined;
}
}
if(x !== undefined) {
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
textarea.value = x[attr];
textarea.select();
var status = document.execCommand('copy');
textarea.remove();
}
}