Question

我尝试使用onclick复制一个锚元素（标题）。这会触发，但不会复制该值。有什么想法吗？

我知道它非常简陋，但是，那就是我。

<a id="myAnchor" onclick="myFunction()" title="smarty@pants.com" href="#">smarty@pants.com</a>

<script>
  function myFunction() {
    var copyText = document.getElementById("myAnchor").title;
    document.execCommand("Copy");
    alert("Copied the text: " + copyText.value);
  }
</script>

Answer 1

我会采用不同的方式，但由于你想使用execCommand（“Copy”），一种方法是在你的点击处理程序中创建一个“mock”输入元素并选择它：

function myFunction() {
  var copyText = document.getElementById("myAnchor").title;
  var mockInput = document.createElement("input");
  document.body.appendChild(mockInput);
  mockInput.type = "text";
  mockInput.value = copyText;
  mockInput.style.opacity = 0;
  mockInput.style.position = "absolute";
  mockInput.style.top = "0px";
  mockInput.style.left = "0px";
  mockInput.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.value);
  mockInput.parentNode.removeChild(mockInput);
}

现在你“复制”到剪贴板

Answer 2

JsFiddle：https://jsfiddle.net/phj1wyqj/

HTML：

<a id="myAnchor" title="smarty@pants.com" href="#">smarty@pants.com</a>

JS代码：

function myFunction() {
  var copyText = document.getElementById("myAnchor").title;
  document.addEventListener('copy', function(event) {
    event.clipboardData.setData('text/plain', copyText);
    event.preventDefault();
    document.removeEventListener('copy', handler, true);
  }, true);
  document.execCommand('copy');
  alert("Copied: " + copyText);
}
document.getElementById('myAnchor').addEventListener('click', myFunction);

参考：StackOverflow

如何复制锚元素onclick？

2 个答案: