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

Question

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

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

<div id="myItem" data-page_id="1510970">1510970</div>

​

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

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

<div id="myText" onclick="copyText()">Text you want to copy</div>

​