copy text present in button attribute to clipboard

Question

I have buttons with some text in the button attribute and what I want is when I click to the button it copy to the clipboard

$('.copyboard').on('click', function(e) {
  e.preventDefault();

  var copyText = $(this).attr('data-text');
  console.log(copyText);
  copyText.text().select();
  document.execCommand("copy");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>

When I click it return this :

Uncaught TypeError: copyText.select is not a function

What's the purpose of `copyText.text().select();`? You already have the data-text content with `var copyText = $(this).attr('data-text');` — j08691, Mar 08 '19 at 14:36
Possible duplicate of [Click button copy to clipboard using jQuery](https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery) — Anurag Srivastava, Mar 08 '19 at 14:37
@j08691 You need to use `.select()` to copy text into clipboard — R3tep, Mar 08 '19 at 14:54

score 7 · Accepted Answer · answered Mar 08 '19 at 14:45

When you want to copy text into the clipboard, you need to select text on a textarea or an input.
The data attribute is an attribute of the tag HTML, it's not selectable.

You can make this if you put the text into a textarea, select it and remove the tag after copy.

$('.copyboard').on('click', function(e) {
  e.preventDefault();

  var copyText = $(this).attr('data-text');

  var textarea = document.createElement("textarea");
  textarea.textContent = copyText;
  textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy"); 

  document.body.removeChild(textarea);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>

score 1 · Answer 2 · answered Mar 08 '19 at 14:43

This example on w3schools shows you you need to use an text field in order to use .select() and then have it copy

Example:

<!DOCTYPE html>
<html>
<body>

<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("copy");
}
</script>

</body>
</html>

This is how you could implement it in your code:

$('.copyboard').on('click', function(e) {
  e.preventDefault();

  var copyText = $(this).attr('data-text');
  var element = document.createElement("input"); 
  element.type = 'text';
  element.value = copyText;
  element.style.position = "fixed"; // Prevent MS edge scrolling.
  document.body.append(element);
  element.select();
  document.execCommand("copy");
  document.body.removeChild(element);
})

score 1 · Answer 3 · answered Mar 08 '19 at 14:53

Apparently you can only copy a visible and also an input element. Try something like:

   $('.copyboard').on('click', function(e) {
  e.preventDefault();

  var copyText = $(this).attr('data-text');
  var el = $('<input style="position: absolute; bottom: -120%" type="text" value="'+copyText+'"/>').appendTo('body'); 
  el[0].select();
  document.execCommand("copy");
  el.remove();
})


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>

score 0 · Answer 4 · answered Mar 08 '19 at 14:42

According to the docs This event is limited to <input type="text"> fields and <textarea> boxes. See jquery - select()

Similarly, The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field MDN - HTMLInputElement - select

As a workaround, you can create a temporary, invisible and un-editable input or textarea on each button click, copy the necessary text to the clipboard, and then remove the input again.

See this article.

copy text present in button attribute to clipboard

4 Answers4