如何使用复制按钮复制文本中的变量？答案

【问题标题】：How do I copy variables in a text by using a copy button?如何使用复制按钮复制文本中的变量？
【发布时间】：2020-01-16 09:06:09
【问题描述】：

我对编码还很陌生，所以如果我的描述有点模糊，请原谅。

我在 JavaScript 中创建了一个“复制”按钮：

function CopyToClipboard(containerid) {
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy");
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(containerid));
    window.getSelection().addRange(range);
    document.execCommand("copy");
    alert("text copied, copy in the text-area")
  }
}

<span id="myInput">
  <p>
    Rope color: <strong><span id="colorName"></span></strong><br>
    Type of clamp <strong><span id="clampName"></span></strong><br>
    Rope length: 130cm <strong><span id="ropeLength"></span></strong>
  </p>
</span>
<button id="button1" onclick="CopyToClipboard('myInput')">Copy</button>

现在按钮可以正常工作了，但此函数仅复制 div 中的文本，而不是变量。
变量是：

colorName（如红色、蓝色等）
clampName（如强、专家等）
ropeLength（总是以“+”开头，然后是“XXXcm”）

如何确保所有内容（文本和变量）都被复制？

编辑：似乎问题有所不同......当直接点击按钮时，复制工作。当您单击按钮以外的任何位置时，然后单击按钮。该按钮不再起作用/复制。我认为这是问题所在，因为变量是通过单击表单来填充的（例如，选择红色作为颜色）。有什么帮助吗？

【问题讨论】：

对于 clrayfication：您的意思是复制 html 对象而不是变量？
其实标记是复制到剪贴板的，但是如果你把文本粘贴到textarea，或者ex。到文本编辑器。如果您将其粘贴到设置了 contenteditable 属性的 HTMLElement（或默认情况下显示 HTML 的应用程序），您可以看到标记已被复制（尝试here）。

标签： javascript html text copy

【解决方案1】：

以下基于您的解决方案的小提琴似乎工作正常。我所做的唯一更改是将 click 事件移至事件侦听器。

document.getElementById("button1").addEventListener("click", CopyToClipboard);
function CopyToClipboard() {
    var containerid = "myInput";
    ...
}

https://jsfiddle.net/q6kz4weu/

【讨论】：

嘿，我在链接中检查了您的代码，当我第一次单击按钮时（不单击其他任何地方）它可以工作。但是，如果我首先单击按钮旁边的按钮（按钮以外的任何位置），然后单击按钮......它不起作用。你知道是什么原因造成的吗？
也许这个具体问题不在您的添加中，而是在我的原始代码中......也许是为什么它一开始就不起作用。