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

2022-01-20 00:00:00 复制 clipboard javascript

我对 JavaScript 一无所知，但我设法使用来自各种 Stack Overflow 答案的点点滴滴将这段代码组合在一起.它工作正常，并通过警告框输出文档中所有选定复选框的数组.

I have no knowledge of JavaScript, but I managed to put this code together using bits and bolts from various Stack Overflow answers. It works OK, and it outputs an array of all selected checkboxes in a document via an alert box.

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 被复制到剪贴板.我尝试添加:

Now I would like to modify it so when I click the btn_test button the output array checkbx is copied to the clipboard. I tried adding:

checkbx = document.execCommand("copy");

或

checkbx.execCommand("copy");

在函数的末尾，然后像这样调用它:

at the end of the function and then calling it like:

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

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

But it does not work. No data is copied to clipboard.

推荐答案

好的，我找到了一些时间，并按照 Teemu 我能够得到我想要的.

OK, I found some time and followed the suggestion by Teemu and I was able to get exactly what I wanted.

所以这里是任何可能感兴趣的人的最终代码.为澄清起见，此代码获取某个 ID 的所有选中复选框，将它们输出到一个数组中，此处命名为 checkbx，然后将它们的唯一名称复制到剪贴板.

So here is the final code for anyone that might be interested. For clarification, this code gets all checked checkboxes of a certain ID, outputs them in an array, named here checkbx, and then copies their unique name to the clipboard.

JavaScript 函数:

JavaScript function:

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);
  }
  checkbx.toString();

  // Create a dummy input to copy the string array inside it
  var dummy = document.createElement("input");

  // Add it to the document
  document.body.appendChild(dummy);

  // Set its ID
  dummy.setAttribute("id", "dummy_id");

  // Output the array into it
  document.getElementById("dummy_id").value=checkbx;

  // Select it
  dummy.select();

  // Copy its contents
  document.execCommand("copy");

  // Remove it as its not needed anymore
  document.body.removeChild(dummy);
}

以及它的 HTML 调用:

And its HTML call:

<button id="btn_test" type="button" onclick="getSelectedCheckboxes('ID_of_chkbxs_selected')">Copy</button>

相关文章