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

IT技术 javascript copy clipboard
2021-02-05 20:04:46

我对 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>

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

6个回答
function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    // to avoid breaking orgain page when copying more words
    // cant copy when adding below this code
    // dummy.style.display = 'none'
    document.body.appendChild(dummy);
    //Be careful if you use texarea. setAttribute('value', value), which works with "input" does not work with "textarea". – Eduard
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
copyToClipboard('hello world')
copyToClipboard('hello\nworld')
这在 Chrome 中对任何人都有效吗?我在 v70+ 中,它不会抛出任何错误,但也不会复制。在 IE 中工作。
2021-03-15 20:04:46
适用于 Firefox 79.0、Chrome 84.0、IE 11、Edge 44(在 Windows 10 上)。
2021-03-15 20:04:46
@how t 复制字符串\n
2021-03-18 20:04:46
出于某种原因,我不得不使用.textContent而不是.value.
2021-03-19 20:04:46
使用 texarea 时要小心。setAttribute('value', value) 不适用于它。
2021-03-27 20:04:46

好的,我找到了一些时间并遵循了Teemu的建议,我能够得到我想要的东西。

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

JavaScript 函数:

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 调用:

<button id="btn_test" type="button" onclick="getSelectedCheckboxes('ID_of_chkbxs_selected')">Copy</button>
这可以在不创建 HTML 元素的情况下完成吗?举例来说,我只想在用户单击按钮或预先指定的元素时将字符串复制到用户剪贴板?
2021-03-14 20:04:46
我建议使用“textarea”而不是“input”,这样您也可以复制换行符。
2021-03-25 20:04:46

为了将任何文本复制到剪贴板的一般目的,我编写了以下函数:

function textToClipboard (text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

参数的值被插入到一个新创建的值中<textarea>,然后被选中,它的值被复制到剪贴板,然后从文档中删除。

使用 texarea 时要小心。setAttribute('value', value) 与“input”一起工作,但不适用于“textarea”。
2021-03-22 20:04:46

很有用。我修改它以将 JavaScript 变量值复制到剪贴板:

function copyToClipboard(val){
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);

    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=val;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
@shukshin.ivan 感谢您的投入!我确实最终将该行更改为:dummy.setAttribute("hidden", true);true 可以是任何东西,因为 hidden 属性的 html 语法没有任何值。
2021-03-15 20:04:46
更改 $(dummy).css('display','none'); 进入 dummy.style.display = 'none'; 避免 jQuery
2021-03-24 20:04:46
你好,有人可以解释下投票吗?我在我的回答中看不到任何明确的回应...
2021-04-02 20:04:46
我还做了一个简单的检查,如果发送的“值”是一个对象,如果是字符串化: if (typeof stuffToAddToClipboard === "object") { stuffToAddToClipboard = JSON.stringify(stuffToAddToClipboard); }
2021-04-07 20:04:46
Chrome 需要显示虚拟。所以我删除了一行代码,它可以工作,谢谢
2021-04-10 20:04:46

当您需要在 Chrome 开发控制台中将变量复制到剪贴板时,您只需使用该copy()命令即可。

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#copyobject