如何复制按钮文本？答案

【问题标题】：How to copy a button text?如何复制按钮文本？
【发布时间】：2019-05-22 13:40:00
【问题描述】：

我想在单击按钮时复制按钮上的文本。我重用了来自w3 schools 的代码。与 w3 学校代码的不同之处在于，当您单击按钮时，它会从输入中复制文本，我想从正在单击的按钮中复制文本。

function copyClipboard() {
  var copyText = document.getElementById("myButton").innerHTML;
  document.execCommand("copy");
}

&lt;button id="myButton" onclick="copyClipboard()"&gt;Text I want to copy&lt;/button&gt;

当我使用 console.log copyText 时，它会显示按钮中的文本，但我的文本永远不会被复制。

你知道为什么吗？

【问题讨论】：

document.getElementById('myButton').innerText
How do I copy to the clipboard in JavaScript?的可能重复
@mikeTheLiar 如果我点击一个按钮并从输入中复制文本，它会起作用，但在我的情况下，我想从我点击的同一个按钮复制文本。跨度>
那里的最佳答案是“不要指望剪贴板相关的命令在您在控制台中测试代码时工作。”您是否打开了开发控制台？
您将按钮的文本分配给一个变量，然后执行复制命令，但您没有选择任何文本。您链接到的示例中缺少该重要部分。例如。 copyText.select();

标签： javascript button copy selection

【解决方案1】：

您的问题是您只存储了button 的value，但您没有选择任何内容，因此不会将任何内容复制到剪贴板。

您需要将该内容放入input 并使用.select() 选择其值，以便可以复制：

function copyClipboard() {
  var copyText = document.getElementById("myButton").innerHTML;
  
  var input = document.createElement("input");
  input.value = copyText;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input); 
}

&lt;button id="myButton" onclick="copyClipboard()"&gt;Text I want to copy&lt;/button&gt;

【讨论】：

我的错误是 console.log 在我的脚本中，它显示：<input>；然后如果我 console.log input.select() 它显示：undefined
@NicolasTwil 检查我编辑的代码，如果您单击按钮，然后将文本粘贴到某个位置，它就可以工作。

【解决方案2】：

function copyClipboard() {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(document.getElementById("myButton").innerHTML).select();
    document.execCommand("copy");
    $temp.remove();
}
<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>

【讨论】：

我想从按钮而不是从输入或 p 复制文本：/
@NicolasTwil 检查我编辑的代码，它可以通过按钮工作。