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

您只需要再次选择copytarget - 最简单的方法就是选择一次，然后在抓取其{{1}时添加侦听器和时引用该变量}。目前，您尚未将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();
}

但是没有必要为此包含像jQuery这样的大型库：

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

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();
}

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

1 个答案: