Copy to clipboard button

I have this structure:

<div class="shadow-container">
  <div>
    <span>All Illusion Dungeons</span>
    <span class="tag">Quest/Farm</span>
    <button class="toggle copy ms-auto" aria-label="Copy to clipboard" onclick="copyToClipboard('#All-Illusion-Autoloot')" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Copy to clipboard"><i class="fa-solid fa-copy"></i></button>
  </div>
  <div class="autoloot-text">
    <img src="https://www.novaragnarok.com/data/items/icons2/25266.png" alt="Dried Yggdrasil Leaf">
  </div>
  <p class="autoloot-text"><span id="All-Illusion-Autoloot" class="code contrast">@alootid +25266|+25267|+25265|+25264|+7564|+25633|+25638|+25899|+35055|+100003|+100004</span></p>
</div>

<div class="shadow-container">
  <div>
    <span>All Illusion Dungeons</span>
    <span class="tag">Quest/Farm</span>
    <button class="toggle copy ms-auto" aria-label="Copy to clipboard" onclick="copyToClipboard('#All-Illusion-Autoloot')" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Copy to clipboard"><i class="fa-solid fa-copy"></i></button>
  </div>
  <div class="autoloot-text">
    <img src="https://www.novaragnarok.com/data/items/icons2/25266.png" alt="Dried Yggdrasil Leaf">
  </div>
  <p class="autoloot-text"><span id="All-Illusion-Autoloot" class="code contrast">@alootid +25266|+25267|+25265|+25264|+7564|+25633|+25638|+25899|+35055|+100003|+100004</span></p>
</div>

See sample: https://i.gyazo.com/792cda5b3f1b25e4cf385a4700f62764.png The button retrieves the content inside autoloot-text, on which every one has a unique id, like seen in the example. Currently I use this JS function:

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

The issue is that Astro doesn't seem to pick up the inline JS there is in HTML, for a reason I still don't understand, so it breaks. Tried looking online for solutions, and found this one that is pretty helpful: https://codepen.io/olawanlejoel/pen/MWGLXyX?editors=1010 The problem is that it targets a specific class, and in this case, every p would be different to one another, and I cannot come across for a solution to it :( My lack of knowledge and/or understanding of Astro is making this worse. I tried putting the JS in the page, it works, but then when I build it, it stops working, then I defer it, it works partially, then I put it as an import, it works pre-build, and breaks after, then inside a script, doesn't recognize the document (since it's server side apparently - I still don't understand the difference). So any help would be... extremely appreciated.

Olawanle Joel

CodePen

copy text JS

...

15 Replies

b1mind•3y ago

that function has jQuery though?

function copyClipBoard(value) {
    let tempInput = document.createElement('TEXTAREA')
    tempInput.value = value
    document.body.appendChild(tempInput)
    tempInput.select()
    document.execCommand('copy')
    document.body.removeChild(tempInput)
}

function copyClipBoard(value) {
    let tempInput = document.createElement('TEXTAREA')
    tempInput.value = value
    document.body.appendChild(tempInput)
    tempInput.select()
    document.execCommand('copy')
    document.body.removeChild(tempInput)
}

here is one I use

MyndiOP•3y ago

Does that still require inline JS?

b1mind•3y ago

na you can just use an event listener

MyndiOP•3y ago

Mind showing me an example? In this case I have 7 different ids. All of them a p to be copied, with content in it.

b1mind•3y ago

so ids need to be unique or should be they are all named All-Illusion-Autoloot?

MyndiOP•3y ago

MyndiOP•3y ago

This is an example. They all have an id with the name "something-Autoloot".

b1mind•3y ago

do they all share a parent?

MyndiOP•3y ago

Yeah, class "autoloot-list".

b1mind•3y ago

sorry trying to get the kids in bed There is probably a better way than surfing the dom but I probably want some kinda Event Delegation to limit the code a bit https://codepen.io/b1mind/pen/gOKreLL?editors=1011 Oh I thought I got your structure right but yea its a bit off, maybe cleaner if you use datasets 🤔 I'm a bit confused by the p > span honestly xD but yea I updated again with no dom surfing and used your class names for the most part. let me know if you have questions.

MyndiOP•3y ago

I have a lot of questions. That's mostly because the p hides/shows on click. So it's essentially a "div", or a poor div. In this case, why let is the right choice over a const? Simply because it's local? From what I understand from the first function is that, it uses the Copy API, right? Then you define a variable tempInput on which you create a textarea. You assignate a value to it? I don't understand why. Then you append this to the body. Select it. Execute the copy command (which is striked for a reason in my JS). Essentially, you create a "fake" area on where to "paste" this information, right? Then the bottom one basically uses this "dad div" and tells it "hey, the closest event, that happens to be a button, I want you to store a variable here". If the variable is "empty", just go back. But if not, then search for the closest "dad" with the class of "shadow-container", and select from within an ID that has within its name "Autoloot", its text? Then console it? (don't get why) And "fetch"? the previously API command? Or no... copy the text from the event listener, and paste it on the Copy Clipboard, which is for the final user?

b1mind•3y ago

I use let cause I'm lazy and its less chars... don't be like me I don't use the clipboard API cause it was not supported when I wrote that snippet, so its basically ya making a fake textarea to copy from, then removing it. Its just the way. I console.dir() cause its nice to see the dom/methods tree when I'm screwing around So the rest is basic understanding of how Functions in JS work You are still not learning it fully yet? func(param) So value is what ever you pass into the function like line 18 so essentially I'm passing the innerText into to the copy() function that then saves it value into the input I'm bad at explaining things sorry xD Also I forget where you are in knowledge sometimes. Your websites coming along btw. Liking it 😄 keep up the hard work Yea you get it though 😄 also my snippet is pretty much the exact same as the one you had above, accept mine takes a string vs an element. Well that and it was jQuery so onclick="copyToClipboard('#id')" you were sending it a string, it would still have had to query for that id oo I lied $(element) would have query'd the string/id jQuery! I should sleep lol

MyndiOP•3y ago

I'm still JS newbie sadCat

thank you for the help! The logic behind making a JS seems clear as water sometimes, to me, but... When it comes to know what to use, is when I crumble. I guess experience will give me that.

b1mind•3y ago

Yea I mean you seem to read it and make sense of it well for not knowing it

MyndiOP•3y ago

Thank you. I will keep giving out my best.

Gaming

Programming

Copy to clipboard button