How to copy contents of a button to clipboard (JS)

Question

I want to be able to copy the text of a button to the clipboard. I am able to retrieve the innerText of the button and log it to console but I am not able to add it to the selection and then ultimately add it to the clipboard with 'document.execCommand("copy");'. Any ideas?

$(document).ready(function() {
  $('button').on('click', function() {
    var copyText = this.innerText;
    console.log(copyText);
    copyText.select;
    document.execCommand("copy");
    /* Alert the copied text */
    alert("Copied the text: " + copyText);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <ul id="test">
    <li>
      <button class="copy-button" id="button1">Test1</button>
    </li>
    <li>
      <button class="copy-button" id="button2">Test2</button>
    </li>
    <li>
      <button class="copy-button" id="button3">Test3</button>
    </li>
  </ul>
</div>

You can only select a text that is in input if I'm not mistaken. — Krzysztof Janiszewski, Aug 22 '18 at 11:47

Elydasian · Answer 1 · 2018-08-22T12:04:06.000

Ok, insted of adding just a string to a clipboard, you must make this:

Create a textarea, add your stiring to the textarea, and copy it from there, and then delete the textarea.

Hope this helps:

function copyStringToClipboard () {
       var str = document.getElementById("btn1").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);
    }

<button onclick="copyStringToClipboard()" id = 'btn1'>Click me</button>
<input type="text" placeholder="Paste here">

I need to be able to do it with the button. This is the basic concept of the small app that I want to build. These buttons will be populated with different text and when the user clicks the desired button, this text needs to be copied to the clipboard so that the user can paste it into another window. — m00, Aug 22 '18 at 11:56
I gave you an example, just make sure the str variable is what you need it to be, — Elydasian, Aug 22 '18 at 11:58

Ying Li · Answer 2 · 2018-08-22T20:25:31.273

Basically, since you can't use button.select(), you want to create an element that you can select in order to copy to clipboard. So by creating a temporary input element with the same content as your button, you bypass that. You can now select the input element and simply copy it. You can test this by using "paste" directly after running the code.

In your HTML:

<button id='btnID'>Success</button>'

In your JS:

var input = document.createElement('input');
input.value = document.getElementById('btnID').innerHTML;
input.id = 'inputID';
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);

Sivakumar Tadisetti · Answer 3 · 2018-08-22T12:05:07.463

An execCommand method to run commands that manipulate the current editable region, such as form inputs or contentEditable elements. Find the explanation from here execCommand

You can check following answer posted by @Hani for this type of question, I've used Hani solution here to solve your issue.

$(document).ready(function() {
  $('button').on('click', function() {
    var copyText = this.innerText;
    // console.log(copyText);
    // copyText.select;
    // document.execCommand("copy");

    var textarea = document.createElement('textarea');
    textarea.id = 'temp_element';
    textarea.style.height = 0;
    document.body.appendChild(textarea);
    textarea.value = copyText;
    var selector = document.querySelector('#temp_element')
    selector.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <ul id="test">
    <li>
      <button class="copy-button" id="button1">Test1</button>
    </li>
    <li>
      <button class="copy-button" id="button2">Test2</button>
    </li>
    <li>
      <button class="copy-button" id="button3">Test3</button>
    </li>
  </ul>
</div>

khalid J-A · Answer 4 · 2018-08-22T13:12:49.933

I think this is the best solution for you, Try it

function CopyText(btnText,btn) {
input=$(btn).prev();
$(input).val(btnText);
    var copyText = $(input);
    copyText.select();
    document.execCommand("copy");
    alert("Copied the text: " +$(copyText).val());
}

.btns{
    position: absolute;
    width:0.1px;
    height:0.1px;
    z-index:-99999999999;
}

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    <ul class="test">
    <li>
<input type="text" class="btns" value="">
<button onclick="CopyText(this.innerText,this)">HELLO222</button>
</li>
    <li>
<input type="text" class="btns" value="">
<button onclick="CopyText(this.innerText,this)">HELLO7777</button>
</li>
</ul>
</div>

the idea is to put the text of the button as a value of text box, and this textbox must be hidden, the problem is copy function does not work with "hidden fields" so the solution for this issue is to set the textbox to very small dimensions I set it 1.0px for each width1 andheightandz-index` with long negative value to make it Semi-hidden. good luck

How to copy contents of a button to clipboard (JS)

4 Answers4