copy text to clipboard with jquery or javascript

Question

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.

There is no way to do this cross browser without invoking the Flash plugin. — spender, Jun 16 '11 at 14:33
you're right. i have used the flash. but it can't copy text optionally.http://xanlz.com/copy/1.html the above is my test link, expect you can correct it for me.i want to it can copy the checked box value.thank you — runeveryday, Jun 16 '11 at 14:36

Brandon Boone · Accepted Answer · 2011-06-17T14:06:02.807

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);
    });

i am sorry,i put you code in.it's still can't work. the copy is disappeared. have you had a referenced to the instructions link http://code.google.com/p/zeroclipboard/wiki/Instructions — runeveryday, Jun 16 '11 at 15:18
@runeveryday - your right it didn't work. Reading the documentation on how the thing works always helps. Please see my updated answer. Thanks! — Brandon Boone, Jun 16 '11 at 21:37
oh.my god. there is a bug on it. first. when you uncheck all the checked box. then click the copy test button. it still copys all the value. how to alter it. thank you. — runeveryday, Jun 17 '11 at 01:21
@runeveryday - change `var text = '';` to `var text = ' ';`. Whatever you successfully copied last stayed on your clipboard since it wasn't able to copy nothing. Change this to a space and you'll see that it "clears" the clipboard when no checkboxes are selected. — Brandon Boone, Jun 17 '11 at 14:08

score 0 · Answer 2 · answered Jun 17 '11 at 14:16

If you don't like to use (or are not allowed) to rely on flash (which I personally would not), I think you're better off creating a text area with the text (or serialized data) preselected with an instruction for the user to copy and later paste the data.

You can make the instruction feel more native by sniffing for the operating system and give different instructions on how to copy and paste (e.g. ctrl+c for windows/linux or ⌘-C for mac).

Maybe not as sexy, but way more foolproof...

copy text to clipboard with jquery or javascript

2 Answers2

Linked