Javascript

Question

我需要一点帮助。我正在修改我的一个项目。目前有一个按钮，用户可以单击该按钮将 div 的文本内容复制到剪贴板。

function copyToClipboard(element) {
  var $temp = $("<textarea>");
  var brRegex = /<br\s*[\/]?>/gi;
  $("body").append($temp);
  $temp.val($(element).html().replace(/<\/?[a-zA-Z]+\/?>/g, '').trim()).select();
  document.execCommand("copy");
  $temp.remove();
}

我有一个按钮设置如下

<button style="copy-button" onclick="copyToClipboard('#copytarget')" id="copyresults">Copy to Clipboard</button>

我现在正在尝试修改此代码，这样用户无需单击按钮，只需单击文本本身（ID 为 'copytarget' 的 div）即可将其复制到剪贴板，但我无法使其正常工作。我有下面的，但不是复制！

document.getElementById("copytarget").addEventListener("click", copyToClipboard);
function copyToClipboard() {
  var $temp = $("<textarea>");
  var brRegex = /<br\s*[\/]?>/gi;
  $("body").append($temp);
  $temp.val($(element).html().replace(/<\/?[a-zA-Z]+\/?>/g, '').trim()).select();
  document.execCommand("copy");
  $temp.remove();
}

谁能看出我做错了什么？提前致谢！

Answer 1

您只需要再次 select copytarget - 最简单的方法是 select 一次，然后在添加侦听器时引用该变量 and 当你抓住它的时候 val。目前，您尚未将 copytarget 分配给您的 element:

const copytarget = document.getElementById("copytarget");
copytarget.addEventListener("click", copyToClipboard);

function copyToClipboard() {
  var $temp = $("<textarea>");
  var brRegex = /<br\s*[\/]?>/gi;
  $("body").append($temp);
  $temp.val($(copytarget).html().replace(/<\/?[a-zA-Z]+\/?>/g, '').trim()).select();
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copytarget">copy here</div>

但是不需要像 jQuery 这样的大库只为了这个：

const copytarget = document.getElementById("copytarget");
copytarget.addEventListener("click", copyToClipboard);

function copyToClipboard() {
  const temp = document.body.appendChild(document.createElement('textarea'));
  temp.value = copytarget.textContent.replace(/<\/?[a-zA-Z]+\/?>/g, '').trim();
  temp.select();  
  document.execCommand("copy");
  temp.remove();
}

<div id="copytarget">copy here 2</div>

Javascript - 单击一个元素以将其内容复制到剪贴板

Javascript - clicking an element to get it to copy it's contents to clip board

copy

copy-paste

addeventlistener