单击文本以将链接复制到剪贴板答案

【问题标题】：Click on text to copy a link to the clipboard单击文本以将链接复制到剪贴板
【发布时间】：2018-08-01 04:01:53
【问题描述】：

我正在尝试使使用我的脚本的用户只需单击特定网站上的 ID，它就会将链接复制到剪贴板，其中包含他们单击的文本。例如，我点击http://www.myurl.com/ 上的文本1510970，它会复制一个带有ID 的链接http://www.myurl.com/viewReport.php?id=，所以当我粘贴我复制的内容时，它应该看起来像http://www.myurl.com/viewReport.php?id=1510970。

【问题讨论】：

w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard

标签： javascript jquery

【解决方案1】：

如果要确保与所有主流浏览器兼容，可以使用以下变通方法：

创建一个<textarea> 元素以附加到文档中。
将其值设置为我们要复制到剪贴板的字符串。
将 <textarea> 元素附加到 HTML 文档。
使用HTMLInputElement.select() 选择<textarea> 元素的内容。
使用Document.execCommand('copy') 将<textarea> 的内容复制到剪贴板。
从文档中删除<textarea> 元素。

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

const url ='http://www.myurl.com/viewReport.php?id=';

document.getElementById('myItem').addEventListener('click', function(e){ 
  let myUrl =  url + e.target.dataset.page_id;
  copyToClipboard( myUrl );
  alert(myUrl + ' copied to clipboard!')
});

&lt;div id="myItem" data-page_id="1510970"&gt;1510970&lt;/div&gt;

STYLE ：在 HTML 中注入 textarea 可能会导致一些呈现问题。为了避免它们，使用 CSS 隐藏元素，给它一个绝对位置和负 y 坐标。（这些只是示例。）

【讨论】：

【解决方案2】：

你可以的

function copyText(){
    var url = "http://www.myurl.com/viewReport.php?id=";
    var text = document.getElementById("myText").innerHTML;
    var textCopy = document.getElementById("myText");
    textCopy.value = url + text;    
    document.execCommand("copy");
    }

&lt;div id="myText" onclick="copyText()"&gt;Text you want to copy&lt;/div&gt;

【讨论】：

这不起作用。它只复制“您要复制的文本”；在将其复制到剪贴板之前，它不会附加链接。