带有预定义文本的Javascript按钮

Question

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

我现在可以通过复制文本区域中的文本来完成此操作，但是，我试图删除对文本区域的需求，只需要一个按钮即可。

一旦按下它将基于按钮值将文本放入剪贴板。

例如，下面发布的片段有一个文本区域，按钮将复制。我只想有按钮，无文字区域，而一旦按下如果你想有一个按钮上的文字，将按钮的复制名称到剪贴板

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

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

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

这里是一个CodePen Demo。

---

更新：HTML与内嵌的JavaScript

<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作品的代码。

Answer 2

，只是使用

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

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

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