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

如果要确保与所有主要浏览器的兼容性，可以使用以下解决方法：

创建一个Datalist元素以附加到文档中。
将其值设置为我们要复制到剪贴板的字符串。
将<textarea>元素附加到HTML文档。
使用<textarea>选择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!')
});

样式：在HTML中插入<div id="myItem" data-page_id="1510970">1510970</div>可能会导致一些渲染问题。为了避免出现这种情况，请使用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>

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

2 个答案: