Question

我编写了一个代码，它会根据下拉选项在文本框中显示一些文本。现在我想添加一个按钮，将该文本框的内容复制到剪贴板。我尝试过很多东西，但似乎都没有。我已经添加了按钮，现在我需要一些关于如何编写函数的帮助，以便我可以通过单击按钮将Textbox的内容复制到剪贴板中。

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" type="text/css">  

</head> 

<script>

function myFunction() 
{
    var x = document.getElementById("Query").value;

    if(x==""){
      document.getElementById("yourquery").value = " ";
    }

    if(x=="One"){
      document.getElementById("yourquery").value = "You have choosen number :1";
    }

    if(x=="Two"){
      document.getElementById("yourquery").value = "You have choosen number :2";
    }

    if(x=="Three"){
      document.getElementById("yourquery").value = "You have choosen number : 3"
    }

    if(x=="Four"){
      document.getElementById("yourquery").value = "You have choosen number :4";
    }
}


</script>

<body>
<form>

<select id="Query" onchange="myFunction()">
        <option value=''>--Select Query--</option>
        <option value='One'>One</option>
        <option value='Two'>Two</option>
        <option value='Three'>Three</option>
        <option value='Four'>Four</option>
</select>

<fieldset style="max-width:600px";"max-width:600px">
<P>Your required query is: <input type="text" id="yourquery" size="50" style="width: 500px; height: 300px"></p>

<input type="button" id="btnSearch" value="Copy To ClipBoard" onclick="GetValue();" />

</fieldset>
</form>

</body>

</html>

Answer 1

复制到剪贴板很简单，JS使用下面给出的方法并根据您的需要进行修改：

＆＃13;

var copyBTN = document.querySelector('.copy');

copyBTN.addEventListener('click', function(event) {
  var textArea = document.querySelector('.text');
  textArea.select();
  try
  {
    var successful = document.execCommand('copy');
    var result = successful ? 'successful' : 'unsuccessful';
    alert('Copying was ' + result);
  } catch (err) {
    alert('unable to copy');
  }
});

＆＃13;

<p>
  <textarea class="text">Hello I'm some text</textarea>
</p>

<p>
  <button class="copy">Copy</button>
</p>

＆＃13;

<强>更新

如果您愿意，可以使用第三方库，例如https://clipboardjs.com/

如何使用Javascript中的复制按钮将文本框的上下文复制到剪贴板中

1 个答案: