使用jQuery或JavaScript将文本复制到剪贴板

Question

使用jQuery或JavaScript将文本复制到剪贴板

3

如何使用jQuery或JavaScript将一些文本复制到剪贴板，来自谷歌。我知道有一个名为zeroclipboard的插件http://code.google.com/p/zeroclipboard/可以跨浏览器实现此功能。说明链接http://code.google.com/p/zeroclipboard/wiki/Instructions。但是当我在我的网站上测试它时，我将其设置为可选复制文本，但它无法工作。我的测试链接是http://xanlz.com/copy/1.html。它总是复制所有值，即使我取消勾选某个复选框。可能值没有改变，但是当我alter()变量时，值就正确了。如何纠正？谢谢。我希望它能够复制已选框的值。如果框未被选中，则不要复制其值。

- runeveryday

2

没有办法在不调用Flash插件的情况下实现跨浏览器的功能。 - spender

你说得对。我已经使用了Flash，但它不能选择性地复制文本。http://xanlz.com/copy/1.html以上是我的测试链接，希望你能为我纠正它。我希望它可以复制选中的框的值。谢谢。 - runeveryday

2个回答

0

如果您不喜欢使用Flash（或者不被允许使用），我认为最好创建一个文本区域，其中包含预选的文本（或序列化数据）和一条指令，要求用户将数据复制并稍后粘贴。

您可以通过嗅探操作系统并给出不同的复制和粘贴指令（例如，在Windows / Linux上按Ctrl + C或在Mac上按⌘-C）来使指令感觉更为本地化。

也许不太性感，但更加可靠...

- Stein G. Strindhaug

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brandon Boone · Accepted Answer

编辑：

我花了一些时间才弄清楚这个问题（没有正确的参考.swf文件），但是这里有一个完整的工作示例（已测试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>

翻译：

你的按钮没有点击事件。

你需要添加类似以下的内容：

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