ZeroClipboard is the easiest and best way to copy text to the clipboard, It uses an invisible Adobe Flash movie and a JavaScript interface.
I tried it and it worked here, the code is here, and if you want to test it, click here:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://www.paulund.co.uk/playground/demo/zeroclipboard-demo/zeroclipboard/ZeroClipboard.js"></script>
<script>
$(document).ready(function()
{
var clientTarget = new ZeroClipboard( $("#target-to-copy"), {
moviePath: "http://www.paulund.co.uk/playground/demo/zeroclipboard-demo/zeroclipboard/ZeroClipboard.swf",
debug: false
} );
clientTarget.on( "load", function(clientTarget)
{
$('#flash-loaded').fadeIn();
clientTarget.on( "complete", function(clientTarget, args) {
clientTarget.setText( args.text );
$('#target-to-copy-text').fadeIn();
} );
} );
});
</script>
</head>
<body>
<p id="flash-loaded" style="display:none">Flash player is loaded.</p>
<h2>Set Copy Target</h2>
<p>
<button id="target-to-copy" data-clipboard-target="clipboard-text">Click To Copy</button><br/>
<script type="text/javascript">
// What I've done to auto-click
$(document).ready(function(){
$("#target-to-copy").click();
});
</script>
<script>
// What I've done to auto-click
jQuery(function(){
jQuery('#target-to-copy').click();
});
</script>
<textarea name="clipboard-text" id="clipboard-text" >COPY ME PLEASE!!!!!
</textarea>
</p>
<p id="target-to-copy-text" style="display:none;">Text Copied.</p>
<h2>Paste Test</h2>
<textarea name="paste-test" id="paste-test" placeholder="Paste Text Here"></textarea>
My problem is that I want to automatically copy to clipboard without any user click. I do not plan to do something evil (I'm building a chatbot, I want him to copy text to clipboard on user's request. This is what I've tried, clicking the button with the id target-to-copy on load, using jquery; but it didn't work.
<script type="text/javascript">
// What I've done to auto-click
$(document).ready(function(){
$("#target-to-copy").click();
});
</script>
<script>
// What I've done to auto-click
jQuery(function(){
jQuery('#target-to-copy').click();
});
</script>
My best guess, that the adobe flash requires that the users actually clicks on a button. What would be the solution for me (to auto-copy) on load? As I told before, I'm creating a smart chat-bot, and the user would chat with the bot and request to copy anything to clipboard, then the bot would respond with a jquery command to copy to clipboard, I don't want any user clicking anything.
As per the ZeroClipboard documentation, this is not possible:
Limitations
User Interaction Required
Due to browser and Flash security restrictions, this clipboard injection can ONLY occur when the user clicks on the invisible Flash movie. A simulated
click
event from JavaScript will not suffice as this would enable clipboard poisoning.
There are other ways to programmatically set the clipboard text but they too require user interaction of some sort – for example, Ctrl-C (or Command-C).