如何在html / javascript中创建“复制到剪贴板”按钮

Question

<html>
<input type="button" id="btnSearch" value="Search" onclick="GetValue();" />
<p id="message" ></p>

<script>
function GetValue()
{
    var myarray= new Array("item1","item2","item3");
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("message").innerHTML=random;
}
</script>

</html>

this is the code and when i generate a random word lets say "item1" shows ,how can i add a button below it that when i click it copies the "item1" 这是代码，当我生成一个随机单词让我们说“item1”显示，我怎么能在它下面添加一个按钮，当我点击它复制“item1”

Answer 1

I've added some lines to your code ,try this it works ! 我在你的代码中添加了一些代码行，试试这个就行了！

 <html> <input type="button" id="btnSearch" value="Search" onclick="GetValue();" /> <p id="message" ></p><br> <button onclick="copyToClipboard('message')">Copy</button> <script> function GetValue() { var myarray= new Array("item1","item2","item3"); var random = myarray[Math.floor(Math.random() * myarray.length)]; //alert(random); document.getElementById("message").innerHTML=random; } function copyToClipboard(elementId) { var aux = document.createElement("input"); aux.setAttribute("value", document.getElementById(elementId).innerHTML); document.body.appendChild(aux); aux.select(); document.execCommand("copy"); document.body.removeChild(aux); } </script> </html>

Answer 2

You're looking for the script to be: 您正在寻找以下脚本：

function GetValue()
{
    var myarray = new Array("item1", "item2", "item3");
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    var message = document.getElementById("message");
    message.value = random;
    message.select();
    document.execCommand('copy');
}

The message element needs to be a selectable element, ie a text input or textarea: <input id="message"> message元素需要是一个可选元素，即文本输入或textarea： <input id="message">

如何在html / javascript中创建“复制到剪贴板”按钮

问题描述

2 个解决方案

解决方案1
26 已采纳 2016-03-26 08:59:43

解决方案2
0 2016-03-26 08:45:53

如何在html / javascript中创建“复制到剪贴板”按钮

问题描述

2 个解决方案

解决方案1 26 已采纳 2016-03-26 08:59:43

解决方案2 0 2016-03-26 08:45:53

解决方案1
26 已采纳 2016-03-26 08:59:43

解决方案2
0 2016-03-26 08:45:53