Question

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

我现在可以通过复制文本区域中的文本来执行此操作，但是，我尝试不再需要文本区域，只需要一个按钮。

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

例如，下面发布的代码段有一个按钮将复制的文本区域。我想只有按钮，没有文本区域，按下它后会将按钮名称复制到剪贴板

＆＃13;

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

＆＃13;

Answer 1

如果您想要按钮的文字，只需使用

即可

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

Answer 2

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

Answer 3

＆＃13;

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

＆＃13;

Answer 4

这会奏效。它来自this example：

＆＃13;

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();  
});

＆＃13;

<button id="alu1copy">I will be copied</button>

＆＃13;

这是 CodePen Demo 。

更新：带内联JavaScript的HTML

＆＃13;

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

＆＃13;

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

带有预定义文本的Javascript按钮

4 个答案: