CODEWITHSUNDEEP
javascripthtml
user9884388
user9884388

Reputation:

Create a Copy Button Without an Input Text Box

I need some JavaScript to make some text to copy your clipboard when you click a button. I have attached the button HTML below. Note: I have more than one button.

<button id="TextToCopy"><img src="button_image.png" onclick="ClipBoard(this)"></button>

I was thinking about doing an if statement like this for each button but don't know what to do to copy the text.

    function ClipBoard(x) {
if (x.id == "TextToCopy")
var copyText = "TextToCopy";

Upvotes: 18

Views: 20613

Answers (4)

Gabriel Bourgault
Gabriel Bourgault

Reputation: 852

I believe the execCommand way of doing this is now deprecated

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible

The new recommended way would be to use the Clipboard API:

navigator.clipboard.writeText("Write something to the clipboard")
  .then(() => {
    // Copy worked
  });

Here is a snippet, but it might get blocked by browsers since the Stackoverflow code snippet runner uses iframes. The code works when not embedded in an iframe. 

function copyById(containerId) {
  const text = document.getElementById(containerId).innerHTML;
  console.log('Copying text to clipboard: ', text);
  navigator.clipboard.writeText(text)
    .then(() => {
      console.log('Copy worked');
    })
    .catch(e => console.error('The copy failed: ', e));
}

// add onClick event handler to your button with additional function() to not invoke copyById immediately:
document.getElementById('copy-button').onclick = function() {
  copyById('to-copy');
}
<p id="to-copy">Text to copy 2!</p>
<button id="copy-button">Copy to clipboard</button>
<br><br>
<input placeholder="Paste here, to try!">

Upvotes: 0

Lucas Matuszewski
Lucas Matuszewski

Reputation: 337

Old question, but if somebody still has a similar problem, instead of creating a temporary Input element, you can use Range API: https://developer.mozilla.org/en-US/docs/Web/API/Range

And now we can modify Takit Isy code to be more generic and to copy from any node by its ID:

function copyById(containerId) {
  var range_ = document.createRange(); // create new Range object
  range_.selectNode(document.getElementById(containerId)); // set our Range to contain the Node we want to copy from
  window.getSelection().removeAllRanges(); // remove any previous selections
  window.getSelection().addRange(range_); // select
  document.execCommand("copy"); // copy to clipboard
  window.getSelection().removeAllRanges(); // remove selection
}

// add onClick event handler to your button with additional function() to not invoke copyById immediately:
document.getElementById('copy-button').onclick = function() {
  copyById('to-copy');
}
<p id="to-copy">Text to copy!</p>
<button id="copy-button">Copy to clipboard</button>
<br><br>
<input placeholder="Paste here, to try!">

You can also use this library which is more generic (works also for inputs and on IE8): https://github.com/bauripalash/copyer.js

Here is all code you needs: https://github.com/bauripalash/copyer.js/blob/master/src/copyer.js

Upvotes: 5

Takit Isy
Takit Isy

Reputation: 10081

You can use this kind of function to do it:

(Note that as you shouldn't use inline JavaScript, I removed your onclick in the HTML.)

function Clipboard_CopyTo(value) {
  var tempInput = document.createElement("input");
  tempInput.value = value;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  document.body.removeChild(tempInput);
}

document.querySelector('#Copy').onclick = function() {
  Clipboard_CopyTo('Text to copy!');
}
<button id="Copy">Copy “Text to copy!” to clipboard</button>
<br><br>
<input placeholder="Paste here, to try!">

This function creates a temporary input that is removed after the text has been copied.

Hope it helps.

⋅ ⋅ ⋅

And for multiline texts, textarea can be used.

function Clipboard_CopyTo(value) {
  var tempInput = document.createElement("textarea");
  tempInput.value = value;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  document.body.removeChild(tempInput);
}

document.querySelector('#Copy').onclick = function() {
  Clipboard_CopyTo('Text to copy\non multiple lines.');
}
<button id="Copy">Copy to clipboard</button>
<br><br>
<textarea placeholder="Paste here, to try!"></textarea>

Upvotes: 27

Bambou
Bambou

Reputation: 1077

I made it with jQuery, check the snippet below :

$('#TextToCopy').click(function(){
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($('#mytext').text()).select();
  document.execCommand("copy");
  $temp.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="mytext">This is a text to copy</p>
<button id="TextToCopy"><img src="button_image.png"></button>
<p>Test here</p>
<textarea></textarea>

EDIT : Here with JavaScript :

/*
// JQuery
$('#TextToCopy').click(function(){
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($('#mytext').text()).select();
  document.execCommand("copy");
  $temp.remove();
});
*/

// JavaScript
function copy_function(id){
  var value = document.getElementById(id).innerHTML;
  var input_temp = document.createElement("input");
  input_temp.value = value;
  document.body.appendChild(input_temp);
  input_temp.select();
  document.execCommand("copy");
  document.body.removeChild(input_temp);
};
<!-- jQuery -->
<!--<p id="mytext">This is a text to copy</p>
<button id="TextToCopy"><img src="button_image.png"></button>
<p>Test here</p>
<textarea></textarea>-->

<!-- JavaScript -->
<p id="mytext">This is a text to copy</p>
<button id="TextToCopy" onclick="copy_function('mytext')"><img src="button_image.png"></button>
<p>Test here</p>
<textarea></textarea>

Upvotes: 13

Related Questions