javascript - 如何使用复制按钮复制文本中的变量？

问题描述

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

我在 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”）

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

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

标签： javascripthtmltextcopy

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

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

https://jsfiddle.net/q6kz4weu/

javascript - 如何使用复制按钮复制文本中的变量？

问题描述

解决方案

推荐阅读