带有预定义文本的 Javascript 按钮答案

【问题标题】：Javascript button with predefined text带有预定义文本的 Javascript 按钮
【发布时间】：2018-01-17 07:48:45
【问题描述】：

我正在开发一个自动复制文本的项目。但是，我想做的只是有一个用户可以单击的按钮，它将指定的文本放入剪贴板。

我现在可以通过从文本区域复制文本来做到这一点，但是，我正在尝试消除对文本区域的需求，只需要一个按钮。

一旦按下，它将根据按钮值将文本放入剪贴板。

例如，下面发布的 sn-p 有一个按钮将复制的文本区域。我只想拥有按钮，没有文本区域，一旦按下它就会将按钮的名称复制到剪贴板

<textarea id="alu1" rows="1" border="none" style="width:70%; height: 10px">
ssh -l admin:admin x.x.x.x
</textarea>
<button id="alu1copy" style="width: 50px; height: 20px">ssh -l admin:admin x.x.x.x</button>
<script>
var input1  = document.getElementById("alu1");
var button = document.getElementById("alu1copy");
button.addEventListener("click", function (event) {
        event.preventDefault();
        input1.select();
        document.execCommand("copy");
    });
</script>

【问题讨论】：

您希望按钮将文本从文本区域复制到剪贴板，还是复制按钮上的文本？对于后者，您使用button.textContent。对不起，如果我误解了。

标签： javascript button copy

【解决方案1】：

这会奏效。取自this example：

var copyBtn = document.getElementById('alu1copy');  

copyBtn.addEventListener('click', function(event) {  
  var range = document.createRange();  
  range.selectNode(copyBtn);  
  window.getSelection().addRange(range);
  try {  
    var successful = document.execCommand('copy');  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('Copy command was ' + msg);  
  } catch(err) {  
    console.log('Unable to copy', err);  
  }
  window.getSelection().removeAllRanges();  
});

&lt;button id="alu1copy"&gt;I will be copied&lt;/button&gt;

这是一个CodePen Demo。

更新：内嵌 JavaScript 的 HTML

<button id="alu1copy">Copy me now</button>

<script>
  var copyBtn = document.getElementById('alu1copy');

  copyBtn.addEventListener('click', function(event) {
    var range = document.createRange();
    range.selectNode(copyBtn);
    window.getSelection().addRange(range);
    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copy command was ' + msg);
    } catch (err) {
      console.log('Unable to copy', err);
    }
    window.getSelection().removeAllRanges();
  });
</script>

如果您需要更全面的内容，this answer 的代码也可以。

【讨论】：

这正是我所需要的，但是，我无法让它在这个 sn-p 之外工作
它也可以在 CodePen 中使用。您是否更喜欢原始示例中的内联 JavaScript？我将在 HTML 中使用内联 JS 发布更新。
像魅力丹一样工作，非常感谢。是否有不需要控制台消息的精简版本？
@JeremyWerner 你可以删除var msg = successful ? 'successful' : 'unsuccessful'; 和console.log('Copy command was ' + msg); 如果你愿意，它仍然可以工作。我建议登录到控制台以获取 catch 语句。如果由于某种原因出现错误，您会想知道原因。 console.log 会告诉你。另外，如果这个答案有帮助，您可以mark it 接受吗？

【解决方案2】：

如果你想要一个按钮的文本，只需使用

var elem = document.getElementById("alu1copy");
var txt = elem.textContent || elem.innerText;

【讨论】：

【解决方案3】：

<script>
var input1  = document.getElementById("alu1");
var button = document.getElementById("alu1copy");
button.addEventListener("click", function (event) {
        event.preventDefault();
        input1.innerHTML = e.target.textContent;
    });
</script>

【讨论】：

【解决方案4】：

<textarea id="alu1" rows="1" border="none" style="width:70%; height: 10px">
ssh -l admin:admin x.x.x.x
</textarea>
<button id="alu1copy" style="width: 50px; height: 20px">ssh -l admin:admin x.x.x.x</button>
<script>
var input1  = document.getElementById("alu1");
var button = document.getElementById("alu1copy");
button.addEventListener("click", function (event) {
        event.preventDefault();
          button.innerText = input1.value;
        document.execCommand("copy");
    });
</script>

【讨论】：