Software development, photography, jokes, ....

Sites by me

 
tas-logoTransportation Administration System
snoezelkussen-logo-kleinstSnoezelen Pillows for Dementia
ikzoekeenbegeleider-logoBegeleiders voor gehandicapten
Laat uw hond het jaarlijkse vuurwerk overwinnen
Betuweroute en Kunst
logo 50x50Hey Vos! Je eigen naam@vos.net emailadres?
Kunst in huis? Nicole Karrèr maakt echt bijzonder mooie dingen
nettylogo2Kunst in huis? Netty Franssen maakt ook bijzonder mooie dingen
Professionele opvang bij Gastouderbureau
Kind-Zijn
Salarisadministratie en belastingadvies bij
De Zaak Loont
Zutphense Bomenstichting

Hosting Favorites

 
ANU Internet Services
XelMedia .internet services
register.com
GoDaddy.com

Blogroll

 
Bomenstichting
MacFreak
Google Translate
PHP
MySQL
jQuery
jQuery UI
codecademy
YourHead Stacks API
Favicon Generator. For real.
Check HTTPS problems



Categories

Archives

Marc's Place


 

Copy DOM content to the clipboard with pure Javascript

 Permalink
Of 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
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();
}
}
© 1997- Marc Vos (and others)   -   Privacy Statement   -    Contact Me