I want to have a button which selects the text in a textarea
and copies it to the clipboard. I can't seem to find any solutions which work in all browsers and don't use flash.
Surely this is doable? I've seen it all over the place but I guess they use flash, which I really want to stay away from if possible as some people don't have it.
This is what I have so far - it just selects the text:
function copyCode() {
$("#output-code").focus();
$("#output-code").select();
}
(The focus is not strictly necessary)
There is a very new option. It is cross-browser but it will take time until everyone has updated their browser.
It works by using the document.execCommand('copy');
function.
With this function you'll copy the select text. This will not only work with textarea
s but with every selected text on the webpage (like in span
, p
, div
, etc.).
Available in Internet Explorer 10+, Chrome 43+, Opera 29+ and Firefox 41+ (see execCommand
compatibility here).
// Setup the variables
var textarea = document.getElementById("textarea");
var answer = document.getElementById("copyAnswer");
var copy = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {
// Select some text (you could also create a range)
textarea.select();
// Use try & catch for unsupported browser
try {
// The important part (copy selected text)
var ok = document.execCommand('copy');
if (ok) answer.innerHTML = 'Copied!';
else answer.innerHTML = 'Unable to copy!';
} catch (err) {
answer.innerHTML = 'Unsupported Browser!';
}
});
<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>
<button id="copyBlock">Click to copy</button> <span id="copyAnswer"></span>