是什么导致Javascript无法将值存储在剪贴板上？

Question

我在ASP.Net网站上使用了一些简单的Javascript。

将计算值并将其存储在隐藏的文本框中，如下所示。

<asp:LinkButton ID="LinkButtonShare" runat="server" CssClass="btn btn-success" OnClientClick="copyToClipboard()"><i class="fa fa-share-square"></i> Share</asp:LinkButton>
<div class="hidden"><asp:TextBox ID="TextBoxCopyURL" runat="server" ClientIDMode="Static"></asp:TextBox></div>

然后执行如下所示的Javascript。

function copyToClipboard() {
  var copyText = document.getElementById("TextBoxCopyURL");
  copyText.select();
  document.execCommand("copy");

  /* Alert with the copied text */
  alert("Copied the text: " + copyText.value);

结果如下所示，但该字符串从未在Firefox或Chrome中复制到我的剪贴板中。

我似乎无法理解我在这么简单的东西上缺少的东西...

Answer 1

您的代码略有变化，但基本相同。它按预期工作。 https://codepen.io/anon/pen/ZjWXoj

function copyToClipboard() {
  var copyText = document.getElementById("textinput");
  copyText.select();
  document.execCommand("copy");

  console.log(copyText.value); // logs copyText input value
}

document.querySelector('#btn').addEventListener('click', () => {
  copyToClipboard();
})

请注意，您无法直接在js中获取剪贴板的内容。即您无法以编程方式触发粘贴或访问剪贴板的内容。

Answer 2

遵循此页面上的示例：

https://forums.asp.net/t/1106610.aspx?How+to+copy+the+text+of+a+textbox+to+clipboard+

您可以通过以下方式解决它：

function copyToClipboard() {
    var copyText = document.getElementById("TextBoxCopyURL");
    copyTextValue = copyText.value;

    window.clipboardData.setData('Text' , copyTextValue );

    /* Alert with the copied text */
    alert("Copied the text: " + copyTextValue );

}