点击复制段落内容[重复]

Posted 2023-03-06

【中文标题】点击复制段落内容[重复]

【英文标题】：click to copy paragraph content [duplicate]

【发布时间】：2019-07-23 22:09:31

【问题描述】：

当我点击它时，我试图复制段落内容， 我写了这段代码，但它不能正常工作

这里是代码：

$('p').click(function (e) 
    e.preventDefault();
    var $temp = $("<input>");
    $temp.val($(this).html()).select();
    document.execCommand("copy");
    $temp.remove();
);

【问题讨论】：

我认为该元素必须在页面上可见才能使$temp.val($(this).html()).select(); 工作。

你可以使用 .text() 代替 .html()

只需在调用$temp.val($(this).html()).select(); 之前添加$("body").append($temp); 即可。 jsfiddle.net/asek26nw

你可以把 .html() 改成 .text()

看看这里。 developer.mozilla.org/en-US/docs/Web/API/Selection/addRange

【参考方案1】：

在这里，这会在 P 标签上添加一个点击侦听器和过滤器。点击后会复制到剪贴板。

const copyElement = (e) => 
  let selection = window.getSelection();
  if (selection.rangeCount > 0) 
    selection.removeAllRanges();
  
  
  let range = document.createRange();
  range.selectNode(e);
  selection.addRange(range);
  document.execCommand('copy');
;

document.addEventListener('click', (e) => 
  if(e.target.matches('p')) 
    copyElement(e.target);
  
);

<p>Testing</p>
<div>No copy</div>
<p>Test2</p>

【讨论】：

我喜欢它的效果很好......我正在尝试在点击时添加一个副本图像......我在第 2 行到最后一行中将 'p' 替换为 'img' 并选择图像一个大纲，但我的剪贴板没有复制图像，它只是空白......您还可以为图像添加任何调整吗？