将JavaScript变量的输出复制到剪贴板

110

我对JavaScript一无所知,但我成功地使用来自各种Stack Overflow答案的零散信息组装了这段代码。它可以正常工作,并通过警报框输出文档中所有选定复选框的数组。

function getSelectedCheckboxes(chkboxName) {
  var checkbx = [];
  var chkboxes = document.getElementsByName(chkboxName);
  var nr_chkboxes = chkboxes.length;
  for(var i=0; i<nr_chkboxes; i++) {
    if(chkboxes[i].type == 'checkbox' && chkboxes[i].checked == true) checkbx.push(chkboxes[i].value);
  }
  return checkbx;
}

我用以下方式来称呼它:

<button id="btn_test" type="button" >Check</button>
<script>
    document.getElementById('btn_test').onclick = function() {
        var checkedBoxes = getSelectedCheckboxes("my_id");
        alert(checkedBoxes);
    }
</script>

现在我想修改它,这样当我点击 btn_test 按钮时,输出数组 checkbx 将被复制到剪贴板中。我尝试添加:

checkbx = document.execCommand("copy");
或者
checkbx.execCommand("copy");

在函数结尾处,并像下面这样调用它:

<button id="btn_test" type="button" onclick="getSelectedCheckboxes('my_id')">Check</button>

但是它不起作用,没有数据被复制到剪贴板。


我怀疑你能否将一个原始的JS对象复制到剪贴板。.execCommand('copy')会复制页面上的选择内容(如果在用户偏好中允许)。你可以尝试将数组字符串化,然后用它填充文本区域,从文本区域中全选,然后使用execCommand进行复制。粘贴时,捕获事件,并将内容解析回数组。 - Teemu
好的,谢谢你指引我方向。我原本认为这可能不可能实现,因为似乎没有直接的搜索结果。所以我想我会尝试按照你建议的去做。 - harman
这可能是一个愚蠢的问题,但你会在哪里/如何粘贴原始JS对象? - Teemu
基本上这是为了一个WordPress的东西..我只是收集所有ID =某个ID的元素,然后将逗号分隔的ID粘贴到WordPress条件标签中。希望这有意义.. - harman
为了让意思更清晰,我正在收集所有被复选框选中的元素,而不是ID =某个ID的元素...;-) - harman
11个回答

1

function CopyText(toCopy, message) {
    var body = $(window.document.body);
    var textarea = $('<textarea/>');
    textarea.css({
        position: 'fixed',
        opacity: '0'
    });

    textarea.val(toCopy);
    body.append(textarea);
    textarea[0].select();

    try {
        var successful = document.execCommand('copy');
        if (!successful)
            throw successful;
        else
            alert(message);
    } catch (err) {
        window.prompt("Copy to clipboard: Ctrl+C, Enter", toCopy);
    }

    textarea.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button type="button" onClick="CopyText('Hello World', 'Text copped!!')">Copy</button>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接