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.

回答1:

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

回答2:

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...

来源：https://stackoverflow.com/questions/6373614/copy-text-to-clipboard-with-jquery-or-javascript

标签

javascript

jquery

zeroclipboard