CODEWITHSUNDEEP
javascriptbuttoncopyclipboard
Seccyeth
Seccyeth

Reputation: 13

Multiple copy to clipboard buttons - copy text from the button itself

I'm trying to build something similar to a virtual keyboard for french special characters, so the user can copy them easy by clicking on the special character button and paste them wherever they need. I'm not very good in javascript and have been struggling with bits of code I found to create what I need. So far, I can make it work for just one button with this code.

For my html (just an excerpt)

<div class="copy_btn_container">
<div class="copy_btn_block">
    <p>Accents graves et accents aigüs<p>
    <button onclick="copyStringToClipboard()" id = 'accbtn1' data-target="accbtn1" class="copy_btn">é</button>
    <button onclick="copyStringToClipboard()" id = 'accbtn2' data-target="accbtn2" class="copy_btn">è</button>
    <button onclick="copyStringToClipboard()" id = 'accbtn3' data-target="accbtn3" class="copy_btn">à</button>
    <button onclick="copyStringToClipboard()" id = 'accbtn4' data-target="accbtn4" class="copy_btn">ù</button>
</div>
</div>

And my javascript is

function copyStringToClipboard () {
   var str = document.getElementById("accbtn1").innerText;
   // Create new element
   var el = document.createElement('textarea');
   // Set value (string to be copied)
   el.value = str;
   // Set non-editable to avoid focus and move outside of view
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   // Select text inside element
   el.select();
   // Copy text to clipboard
   document.execCommand('copy');
   // Remove temporary element
   document.body.removeChild(el);
}

So I know that document.getElementById accepts only one element, so I tried document.getElementsByClassName but it return a "undefined" value. I'm open to other ways for the js too, as I saw that it was possible to use constants or such, but all of the example are designed to copy values from input fields, and for some reason I can't manage dont tweak them into working for copying the button's text.

Any help would be appreciated ! Thanks

Upvotes: 1

Views: 3153

Answers (2)

code xxii
code xxii

Reputation: 1

I'm newbie too, I used something from W3, and then followed an example here, but needed to add the "multi botton" situation, and then take info from here. this is how I end in the shorter version

=) its working for me.

<script>
 function copyClipboard(target) {
    var copyText = document.getElementById(target).innerHTML;
    //document.execCommand("copy"); --> is obsolet
    navigator.clipboard.writeText(copyText);
          }

<button onclick="copyClipboard(getAttribute('id'))" id="xxxx">123</button>

Upvotes: 0

Claytronicon
Claytronicon

Reputation: 1456

You could pass the id or data attribute into your function like so:

function copyStringToClipboard (target) {
   var str = document.getElementById(target).innerText;
   // Create new element
   var el = document.createElement('textarea');
   // Set value (string to be copied)
   el.value = str;
   // Set non-editable to avoid focus and move outside of view
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   // Select text inside element
   el.select();
   // Copy text to clipboard
   document.execCommand('copy');
   // Remove temporary element
   document.body.removeChild(el);
}
<div class="copy_btn_container">
<div class="copy_btn_block">
    <p>Accents graves et accents aigüs<p>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn1' data-target="accbtn1" class="copy_btn">é</button>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn2' data-target="accbtn2" class="copy_btn">è</button>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn3' data-target="accbtn3" class="copy_btn">à</button>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn4' data-target="accbtn4" class="copy_btn">ù</button>
</div>
</div>

Upvotes: 2

Related Questions