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";
3 Answers
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>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=""></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>Old question, but if somebody still has a similar problem, instead of creating a temporary Input element, you can use Range API:
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):
Here is all code you needs:
