JavaScript复制到剪贴板不起作用答案

【问题标题】：JavaScript copy to clipboard not workingJavaScript复制到剪贴板不起作用
【发布时间】：2018-06-04 12:53:27
【问题描述】：

我的脚本中有一个函数给我一个错误。功能目的是通过 onClick 事件从静态面板（不是文本框或输入）复制文本。

未捕获的 TypeError：copyText.select 不是函数

我想要的是让用户能够点击文本并将其复制到他的剪贴板。

也许你可以提供更好的功能？

https://codepen.io/abooo/pen/jYMMMN?editors=1010

function myFunction() {
  var copyText = document.getElementById("display");
  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.value);
}

来自 w3schools

【问题讨论】：

<h1> 没有 .value() 函数（<h1> 也没有 .select() 函数）。也许您正在考虑输入？
例如将h1 更改为textarea...这样就可以了..
无需将header1 标记换成textarea。您可以使用隐藏输入来保存调用该函数的元素的 textContent，这将使您能够使用 .select() 和 document.execCommand('copy') CodePen Example 已更新以供多次使用

标签： javascript html dom copy-paste

【解决方案1】：

最近的解决方案（2020 年）使用了大多数现代浏览器都支持的新 Clipboard API writeText method（有关详细信息，请参阅 Can I use）。

//If you want to copyText from Element
function copyTextFromElement(elementID) {
  let element = document.getElementById(elementID); //select the element
  let elementText = element.textContent; //get the text content from the element
  copyText(elementText); //use the copyText function below
}

//If you only want to put some Text in the Clipboard just use this function
// and pass the string to copied as the argument.
function copyText(text) {
  navigator.clipboard.writeText(text);
}

<div id="mytext">This is some text that needs to be copied</div>
<button onclick="copyTextFromElement('mytext')">Copy</button>

【讨论】：

【解决方案2】：

这将允许您复制元素的文本。虽然我没有用复杂的布局测试过。

如果您想使用此功能，请删除警报并提供更好的方式让用户知道内容已被复制。

SAFARI：这不适用于 10.0 版之前的 Safari。但是从 Safari 10.0 开始，现在可以使用了。

function copyText(element) {
  var range, selection, worked;

  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();        
    range = document.createRange();
    range.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  
  try {
    document.execCommand('copy');
    alert('text copied');
  }
  catch (err) {
    alert('unable to copy text');
  }
}

&lt;h1 id='display' onClick='copyText(this)'&gt;Text Sample&lt;/h1&gt;

如果您想在 <input> 或 <textarea> 元素上使用它，请告诉我代码不同。

try/catch 适用于会引发异常的旧版本 Safari。因此，如果您不打算在 10.0 版本之前支持 Safari，那么您可以将其移除。

【讨论】：

我认为您在该命令上 try 和 catch 并不重要。即使您没有正确选择文本，它也不会复制任何内容或您实际选择的任何内容。
但如果尝试复制电子邮件内容，这将不起作用。
旧版浏览器需要try/catch。其中一些会抛出异常而不是正常失败。

【解决方案3】：

Intervalia 的出色回答。

对它的小改进，有时点击的元素不是你要复制的。
所以我建议你传递要复制的元素的 id。

<button onClick='copyText("display")'> Copy </button>
<h1 id='display'> Text Sample </h1>

然后，在你的函数的第一行做

element = document.getElementById(element);

差别不大，但我认为这样更有用。

【讨论】：

【解决方案4】：

select() 方法用于选择文本字段的内容。它不适用于h1 元素。

【讨论】：

【解决方案5】：

嗨，所以我调查了它，因为你没有使用 textInput 你不能只使用.select()function。我从堆栈溢出开发人员 Jason 那里借用了一些关于如何在 javaScript 中突出显示项目的代码

selecting text in an element akin to highlighting with your mouse.

function selectedText(element)(){

var doc = document,
text = doc.getElementById(element)
range, selection;

if(doc.body.createTextRange){ 
 range = document.body.createTextRange();
 range.moveToElementText(text);
 range.select(); 
}
else if(window.getSelection){
  selection = window.getSelection();
  range = document.createRange();
  range.selectNodeContents(text);
  selection.removeAllRanges();
  selection.addRange(range);   
}

return range;

然后我修改它以返回范围。有了这个，你所要做的就是

document.onclick = function(e){
  if(e.target.className === 'click'){

      var copytext = SelectText('display');
      document.execCommand("copy");
      alert("Copied the text: " + copytext);
   }
}

这里的关键部分是传递给.execCommand() is lower case 'copy'的字符串

【讨论】：