I am trying to implement a copy-to-clipboard button on a webpage. Below is the code I have written
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<p id="p1">Text1</p>
<p id="p2">Text2</p>
<button onclick="copyToClipboard('#p1')">Copy Text1</button>
<button onclick="copyToClipboard('#p2')">Copy Text2</button>
<br/><br/>
<input type="text" placeholder="Paste here for test" />
However, this does not seem to work on IE 9, 11 and Safari. Is there any change/alternate implementation I can use to implement this on my webpage.
Select the text or graphics you want to copy, and press Ctrl+C. Each selection appears in the Clipboard, with the latest at the top. Optionally, repeat step 2 until you've copied all the items you want to use. Tip: After you open the Clipboard, it stores content that you copy or cut from anywhere.
Not sure about Safari, but on IE you can do:
window.clipboardData.setData('Text', 'text you want to copy goes here');
I hope it helps. Cheers
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With