Search code examples
javascriptjqueryzeroclipboard

copy text to clipboard with jquery or javascript


how to copy some text to the clipboard with jquery or javascript, from google. i know there

is a pludgin named zeroclipboard http://code.google.com/p/zeroclipboard/ can do this with

cross browers. the instructions link http://code.google.com/p/zeroclipboard/wiki/Instructions

but when i tested it on my site. i set it to copy text optionally . it can't work.

my test link is http://xanlz.com/copy/1.html

it always copys all the values. even i uncheck some check box. may be the value doesn't be changed. but when i alter() the variable, the value is ok. how to correct it? thank you.

i want it can copy the checked box value. if the box unchecked, then don't copy its value.


Solution

  • EDIT :

    Took me a while to figure this out (didn't have the correct references to the .swf), but here is a complete working example (tested IE 8 & Firefox 4)

    <html>
      <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
        <script type="text/javascript" src="http://zeroclipboard.googlecode.com/svn/trunk/ZeroClipboard.js" ></script>
        <script type="text/javascript" >
            $(document).ready(function(){
                var checkall = $('#checkall');
                var boxes = $('input[type="checkbox"]').not(checkall);
                checkall.click(function () {
                    boxes.attr('checked', this.checked);
                });
                boxes.change(function() {
                    checkall[0].checked = this.checked && boxes.filter(':checked').length === boxes.length;
                });
    
                ZeroClipboard.setMoviePath('http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf');
                var clip = new ZeroClipboard.Client();
    
                clip.glue("copyvalue");
                clip.addEventListener( 'onMouseOver', function(){
                    var text = ' '; //Make this a space since we can't copy nothing...
                    $('input.forminput:checked').each(function() {
                        text += $(this).val() + "\n";
                    });
                    clip.setText(text);
                });
            }) ;
        </script>
      </head>
      <body>
        <input class="forminput" type="checkbox" value="test one" checked="checked" name="VD1">
        <br>
        <input class="forminput" type="checkbox" value="test two" checked="checked" name="VD2">
        <br>
        <input class="forminput" type="checkbox" value="test three" checked="checked" name="VD3">
        <br>
        <input class="forminput" type="checkbox" value="test four" checked="checked" name="VD4">
        <br>
        <input class="forminput" type="checkbox" value="test five" checked="checked" name="VD5">
        <br>
        <input id="checkall" type="checkbox" checked="checked" name="checkall">
        <input id="copyvalue" class="button" type="button" value="copy test">
      </body>
    </html>   
    

    ORIGINAL:

    You don't have a click event for your button.

    You need to add something like:

        var clip = new ZeroClipboard.Client();
        $("#copyvalue").click(function(){
            var text = '';
            $('input.forminput:checked').each(function() {
                text += $(this).val() + "\n";
            });
            //alert(text);
            clip.setText(text);
        });