Easy Multiple Copy to Clipboard by ZeroClipboard

It almost stuck my head today when fixing this multiple zeroclipboard button by ZeroClipboard library.

<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
////copy to clip
  	var clip = null;

   function $(id) { return document.getElementById(id); }

   function init() 
   {
      clip = new ZeroClipboard.Client();
      clip.setHandCursor( true );
   }

   function move_swf(ee)
   {    
      copything = document.getElementById(ee.id+"_text").value;
      clip.setText(copything);

         if (clip.div)
		 {	  
            clip.receiveEvent('mouseout', null);
            clip.reposition(ee.id);
         }
         else{ clip.glue(ee.id);   }
 
         clip.receiveEvent('mouseover', null);
 
   }    
   
</script>

<body onload="init();">
<table width="0" border="0">
  <tr>
    <td><input type='text' id='textid_text' value='your text' /></td>
    <td><div id='textid' onMouseOver='move_swf(this)' class='clip_button'>COPY</div></td>
  </tr>
  <tr>
    <td><input type='text' id='textid2_text' value='your text 2' /></td>
    <td><div id='textid2' onMouseOver='move_swf(this)' class='clip_button'>COPY</div></td>
  </tr>
  <tr>
    <td><input type='text' id='textid3_text' value='your text 3' /></td>
    <td><div id='textid3' onMouseOver='move_swf(this)' class='clip_button'>COPY</div></td>
  </tr>
  <tr>
    <td><input type='text' id='textid4_text' value='your text 4' /></td>
    <td><div id='textid4' onMouseOver='move_swf(this)' class='clip_button'>COPY</div></td>
  </tr>
  <tr>
    <td><input type='text' id='textid5_text' value='your text 5' /></td>
    <td><div id='textid5' onMouseOver='move_swf(this)' class='clip_button'>COPY</div></td>
  </tr>
</table>
</body>

You can generate above html dynamically by loop and generate ids with unique values.
See Demo

Download

  • 1234

    Demo fiels, please…..

  • 1234

    You can share demo files, please….

    • http://blog.aajit.com M. Ashraful Abedien

      Demo and download link added. It runs only on server.

      • rishi

        not working for me :(

  • Shawn Gallagan

    Thanks for the code, worked great!

  • Raja

    very nice code

  • jtzako

    I tried to use this but cant get the buttom to activate for some reason. (it doesnt become clickable)  If I use the default way of using ZeroClipboard per their wiki it does work, but only for 1 button. Any idea what I’m doing wrong?

    • http://blog.aajit.com M. Ashraful Abedien

      You can try steps to fix it.
      1. open ZeroClipboard.js and make sure you flash file is in right location in the line ” moviePath: ‘ZeroClipboard.swf ”
      2. make sure you defined ids of input text field and div. and its have a unique sequence as i used in demo files.
      3. double check the move_swf() is working.you can download the demo files. demo files only works well in web server.

      • rishi

        not on local host ?

  • Bambi

    I’m a newbie and It would be great if you could add comments in the code to describe what’s happening in it. I need to modify it so that, after the clipboard is filled, the page switches to another url. I’d also like to popup a tip on-hover to inform the user what will happen. Any suggestions?

  • milad

    Hi
    Thanks for share
    you solve my problem and save some hour for me
    Thanks

  • manish

    how can i add a link also it will redirect to any another website

  • Patrick

    Thx, edited a bit, and works like a charm

  • Guilherme

    Awesome, it works! Tks!!!

  • ffdgdfgdf

    try Quick Multi-Copy which remembers last 10 items you have copied to clipboard, and you will know why it is called “Quick”.

  • Praveen

    Hi, I tried your code and it works great !!!. Thanks.

    But i want to display a tooltip on mouseover and hide that tooltip on mouseout and onClick i want to copy the text to clipboard. Can you please help me solve this… Thanks again for your contribution,