Web: Copy to clipboard (custom..)

Question

Hey,

I know the best and easiest way to copy text to a clipboard that is both cross browser and simple is to use Flash, which is fine with me! I have come across this awesome plugin called clippy but the problem is you have to embed the image or object onto the page.

I wanted to have a link that when clicked would do the copying. Any ideas? :-)

Thanks!

Answer 1

Using the zeroclipboard library, you can use any blocklevel element as your clipboard button. This works because zeroclipboard floats an invisible flash movie above the specified HTML blocklevel element.

If you want to have a link clicked as to copy to clipboard, try something like the following:

<div id="d_clip_container" style="position:relative">
   <div id="d_clip_button"><a href="#">Copy to Clipboard</a></div>
</div>

And later:

<script language="text/javascript">
clip.glue( 'd_clip_button', 'd_clip_container' );
</script>

Note that the a tag could be omitted here because the clipboard button is floating over the containing div, not the link itself.