如何将按钮的内容复制到剪贴板（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> 

Answer 1

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"> 

Answer 2

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> 

Answer 3

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);

Answer 4

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 and height and z-index` with long negative value to make it Semi-hidden. good luck