http://coldfusion.com logo
Join Slack
Powered by
Hey, I am trying to find a simple native js soluti...
# javascript
g
Hey, I am trying to find a simple native js solution to stick a button on an html report to "copy" the entire window contents to the clipboard. All I have found are complex things with event handlers and such. I don't understand them. https://stackoverflow.com/questions/36270886/event-clipboarddata-setdata-in-copy-event
m
Can you explain what you mean by "the entire window contents"? You say "HTML report" so is it the HTML code you're copying? A JSON which describes the content shown? A screenshot? A place to begin gaining an understanding might be here: https://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/ It goes into some depth about "the clipboard" (which, as you'll see, is a misnomer as there are often multiple clipboards present).
Now keep in mind, that is a very old article. So a lot has changed.
A more recent article can be seen here: https://css-tricks.com/native-browser-copy-clipboard/
g
OK, that looks simpler.
How would I make it copy everything in a div with id="foo"?
m
Like, the HTML inside? It would be document.getElementById("foo").innerHTML I think, something like that. Jquery $("#foo").html() I think.
g
Oh, is this jQuery?
m
What? I just gave a couple examples, one in vanilla JS and another in JQuery in case you were using it.
g
OK, I copied the html for the email link and the js into the top of my report. When I click the button the email address goes to my clipboard.
But when I change this line: var emailLink = document.querySelector('.js-emaillink'); To this: var emailLink = document.getElementById("foo").innerHTML I get Range.selectNode: Argument 1 is not an object.
m
Is the ID of the div literally "foo"?
s
Also, make sure cases match (JS is finicky that way)
➕ 1
g
<div id="foo">
m
No idea what's going in your case. I did this:
<div id="foo"><span style="font-weight:bold;">There's something here</span></div>
<script>
function getStuff(){
var contentOfDiv = document.getElementById("foo").innerHTML;
console.log(contentOfDiv);
}
getStuff();
</script>
And it console.writes the contents of the div right to the console
g
But can you write it to the clipboard?
p
m
m
function getStuff(){ const contentOfDiv = document.getElementById("foo").innerHTML; navigator.clipboard.writeText(contentOfDiv) .then(() => { alert(
Copied!
) }) .catch((error) => { alert(
Copy failed! ${error}
) }) } getStuff();
DOH Michael beat me to it lmao
off by 5 minutes. damn, I must be slipping. 😛
m
I needed to think of something else other then the task at hand 🙂
g
Holy shitballs Patrick! That was simple.
👍🏻 1
Michael when I run your code I get navigator.clipboard is undefined
m
what browser are you in?
m
According to the MDN it should be available for all major browsers... https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard
➕ 1
g
Firefox
That clipboardjs works really slick. I was hoping to get it working in native js. I like it when I understand how things work.
p
I rather go with open source mainstream libraries that are cross browser supported; its quick and easy
g
The only problem with it is that it's copying text, not the innerHTML
There must be an option.
Hmm, this one works in jsfiddle. But in my test environment in FF it copies the html code. I want the formatted text so it will paste into MSWord.
Open in Slack
PreviousNext
Powered by