如何用JavaScript复制到剪贴板？

Question

如何将文本复制到剪贴板（多浏览器）？

相关：Trello如何访问用户的剪贴板？

Answer 1

概述

有三种主要的浏览器API用于复制到剪贴板：

1. 异步剪贴板API [navigator.crapboard.writeText]

   • 中提供以文本为中心的部分Chrome 66（2018年3月）
   • 访问是异步的，使用JavaScript承诺，这样安全用户提示（如果显示）就不会中断页面中的JavaScript。
   • 文本可以直接从变量复制到剪贴板。
   • 仅支持通过HTTPS提供的页面。
   • 在Chrome 66页面中，非活动选项卡可以写入剪贴板，而无需权限提示。

2. document.execCommand（“复制”）(已弃用) 👎

   • 截至2015年4月，大多数浏览器都支持此功能（请参阅下面的浏览器支持）。
   • 访问是同步的，即停止页面中的JavaScript直到完成，包括显示和用户与任何安全提示交互。
   • 从DOM中读取文本并将其放置在剪贴板上。
   • 在2015年4月的测试期间，只有Internet Explorer在向剪贴板写入时显示权限提示。

3. 覆盖复制事件

   • 请参阅上的剪贴板API文档覆盖复制事件.
   • 允许您从任何复制事件中修改剪贴板上显示的内容，可以包括纯文本以外的其他数据格式。
   • 此处未涵盖，因为它无法直接回答问题。

一般开发说明

当您在控制台中测试代码时，不要期望与剪贴板相关的命令能够工作。通常，页面需要处于活动状态（异步剪贴板API）或需要用户交互（例如用户单击）以允许(document.execCommand（“副本”）)要访问剪贴板，请参阅下面的详细信息。

重要信息（此处注明2020年2月20日）

注意，因为这篇文章最初是写的跨来源IFRAME中权限的弃用和其他IFRAME“沙盒”防止嵌入式演示“运行代码段”按钮和“codepen.io示例”在某些浏览器（包括Chrome和Microsoft Edge）中工作。

要开发并创建您自己的网页，请通过HTTPS连接提供该网页以进行测试和开发。

下面是一个测试/演示页面，演示代码的工作方式：https://deanmarktaylor.github.io/clipboard测试/

异步+回退

由于新的异步剪贴板API的浏览器支持级别，您可能希望回到document.execCommand（“复制”）方法获得良好的浏览器覆盖率。

下面是一个简单的示例（嵌入此站点可能不起作用，请阅读上面的“重要”注释）：

函数回退CopyTextToClipboard（文本）{var textArea=document.createElement（“textArea”）；textArea.value=文本；//避免滚动到底部textArea.style.top=“0”；textArea.style.left=“0”；textArea.style.position=“固定”；document.body.appendChild（textArea）；textArea.focus（）；textArea.select（）；尝试{var成功=document.execCommand（'copy'）；var msg=成功？'成功'：'不成功'；console.log（'Fallback:复制文本命令是'+msg）；}捕获（错误）{console.error（“回退：Oops，无法复制”，err）；}document.body.removeChild（textArea）；}函数copyTextToClipboard（文本）{if（！navigator.clipboard）{回退将文本复制到剪贴板（文本）；回报；}navigator.clipboap.writeText（text）.then（function（））{console.log（'Sync:复制到剪贴板成功！'）；}，函数（err）{console.error（'Async:无法复制文本：'，err）；});}var copyBobBtn=document.querySelector（'.js copy bob btn'），copyJaneBtn=document.querySelector（'.js-copy-janebtn'）；copyBobBtn.addEventListener（'单击'，函数（事件）{将文本复制到剪贴板（'Bob'）；});copyJaneBtn.addEventListener（'click'，函数（事件）{将文本复制到剪贴板（“Jane”）；});

<div style=“display:inline-block；vertical-align:top；”>将剪贴板设置为bob将剪贴板设置为jane</div><div style=“display:inline-block；”><textarea class=“js-test-textarea”cols=“35”rows=“4”>尝试粘贴到此处以查看剪贴板上的内容：</text区域></div>

（codepen.io示例可能不起作用，请阅读上面的“重要”注释）请注意，此代码段在Stack Overflow的嵌入式预览中效果不佳，您可以在此处尝试：https://codepen.io/DeanMarkTaylor/pen/RMRaJX？editors=1011

异步剪贴板API

• MDN参考
• Chrome 66公告贴（2018年3月）
• 参考异步剪贴板API文件草稿

注意，Chrome 66中有一个“请求权限”的功能，可以通过权限API测试对剪贴板的访问。

var text=“显示在剪贴板上的示例文本”；navigator.clipboap.writeText（text）.then（function（））{console.log（'Sync:复制到剪贴板成功！'）；}，函数（err）{console.error（'Async:无法复制文本：'，err）；});

document.execCommand（“复制”）

本文的其余部分将深入探讨document.execCommand（“复制”）应用程序编程接口。

浏览器支持

JavaScript语言document.execCommand（“副本”）支持已增加，请参阅以下链接以获取浏览器更新：(已弃用) 👎

• Internet Explorer 10+（尽管这个文档表示Internet Explorer 5.5+提供了一些支持）。
• 谷歌Chrome 43+（至2015年4月）
• Mozilla Firefox 41+（2015年9月发货）
• Opera 29+（基于2015年4月的Chromium 42）

简单示例

（可能无法嵌入此网站，请阅读上面的“重要”注释）

var copyTextareaBtn=document.querySelector（'.js-textareacopybtn'）；copyTextareaBtn.addEventListener（'click'，函数（事件）{var copyTextarea=文档.querySelector（'.js-copyTextarea'）；copyTextarea.focus（）；copyTextarea.select（）；尝试{var successful=document.execCommand（“副本”）；var msg=成功？'成功'：'不成功'；console.log（'复制文本命令为'+msg）；}捕获（错误）{console.log（'Oops，无法复制'）；}});

<p>复制文本区域你好，我是一些文本</p>

复杂示例：复制到剪贴板而不显示输入

如果存在文本区域或输入元素在屏幕上可见。

在某些情况下，您可能希望将文本复制到剪贴板而不显示输入/文本区域元素。这是一个解决此问题的方法示例（基本上是插入元素、复制到剪贴板、删除元素）：

通过Google Chrome 44、Firefox 42.0a1和Internet Explorer 11.0.8600.17814测试。

（可能无法嵌入此网站，请阅读上面的“重要”注释）

函数copyTextToClipboard（文本）{var textArea=document.createElement（“textArea”）；////***此造型是一个额外的步骤，可能不需要***////它为什么在这里？确保：// 1. 元素可以有焦点和选择。// 2. 如果元素要进行flash渲染，那么它的视觉影响最小。// 3. 减少选择和复制的片面性，如果//textarea元素不可见。////可能元素甚至不会渲染，甚至不会//闪光，所以其中一些只是预防措施。然而，在//Internet Explorer弹出窗口时，元素可见//询问用户对该网页的权限的框//复制到剪贴板。////无论滚动位置如何，都应放在屏幕的左上角。textArea.style.position=“固定”；textArea.style.top=0；textArea.style.left=0；//确保其宽度和高度较小。设置为1px/1em//不起作用，因为在某些浏览器上这会产生负w/h。textArea.style.width='2em'；text面积.style.height='2em'；//我们不需要填充，如果需要flash渲染，则可以减小大小。textArea.style.padding=0；//清理所有边界。textArea.style.border=“无”；textArea.style.outline=“无”；textArea.style.box阴影=“无”；//如果出于任何原因渲染，请避免白色框闪烁。textArea.style.background=“透明”；textArea.value=文本；document.body.appendChild（textArea）；textArea.focus（）；textArea.select（）；尝试{var成功=document.execCommand（'copy'）；var msg=成功？'成功'：'不成功'；console.log（'复制文本命令为'+msg）；}捕获（错误）{console.log（'Oops，无法复制'）；}document.body.removeChild（textArea）；}var copyBobBtn=document.querySelector（'.js-copy-bob-btn'），copyJaneBtn=document.querySelector（'.js-copy-janebtn'）；copyBobBtn.addEventListener（'单击'，函数（事件）{将文本复制到剪贴板（'Bob'）；});copyJaneBtn.addEventListener（'单击'，函数（事件）{将文本复制到剪贴板（“Jane”）；});

<div style=“display:inline-block；vertical-align:top；”>将剪贴板设置为bob将剪贴板设置为jane</div><div style=“display:inline-block；”><textarea class=“js-test-textarea”cols=“35”rows=“4”>尝试粘贴到此处以查看剪贴板上的内容：</text区域></div>

其他注释

仅当用户采取操作时才有效

全部document.execCommand（“复制”）调用必须是用户操作的直接结果，例如单击事件处理程序。这是一种措施，可以防止在用户不期望的情况下干扰用户的剪贴板。

请参阅谷歌开发者在这里发帖了解更多信息。

剪贴板API

请注意，可以在此处找到完整的剪贴板API草案规范：https://w3c.github.io/clipboard-apis（网址：https://w3c.github.io/clipboard-apis）/

是否支持？

• 支持的document.queryCommands（“复制”）应该返回真的如果命令“浏览器支持”。
• 和document.queryCommandEnabled（“复制”）返回真的如果document.execCommand（“复制”）如果现在调用，将成功。检查以确保命令是从用户启动的线程调用的，并且满足其他要求。

然而，作为浏览器兼容性问题的一个例子，谷歌Chrome从2015年4月到10月只返回了真的从支持的document.queryCommands（“复制”）如果命令是从用户初始化线程调用的。

请注意下面的兼容性详细信息。

浏览器兼容性详细信息

虽然只需拨打一个简单的电话document.execCommand（“复制”）包裹在尝试/抓住由于用户单击而调用的块将使您获得最大的兼容性，以下是一些限制条件：

任何呼叫document.execCommand文件,支持document.query命令或document.query命令已启用应该用一个尝试/抓住块。

不同的浏览器实现和浏览器版本在调用时抛出不同类型的异常，而不是返回假.

不同的浏览器实现仍在不断变化剪贴板API仍在草案中，所以请记住进行测试。

Answer 2

自动复制到剪贴板可能很危险，因此大多数浏览器（Internet Explorer除外）都很难做到这一点。就个人而言，我使用以下简单技巧：

函数copyToClipboard（文本）{window.frompt（“复制到剪贴板：Ctrl+C，Enter”，文本）；}

用户将看到提示框，其中已选择要复制的文本。现在已经足够了Ctrl键+C类和输入（关上盒子）——瞧！

现在剪贴板复制操作是安全的，因为用户是手动完成的（但方式非常简单）。当然，它适用于所有浏览器。

<button id=“demo”onclick=“copyToClipboard（document.getElementById（'demo'）.innerHTML）”>这就是我想要复制的内容<脚本>函数copyToClipboard（文本）{window.prompt（“复制到剪贴板：Ctrl+C，Enter”，text）；}</script>

Answer 3

以下方法适用于Chrome、Firefox、Internet Explorer和Edge以及最新版本的Safari（2016年10月发布的版本10中增加了复制支持）。

• 创建一个文本区域，并将其内容设置为要复制到剪贴板的文本。
• 将文本区域附加到DOM。
• 选择文本区域中的文本。
• 调用document.execCommand（“复制”）
• 从dom中删除文本区域。

注意：您不会看到文本区域，因为它是在Javascript代码的同一同步调用中添加和删除的。

如果您自己执行此操作，请注意以下事项：

• 出于安全原因，这只能从事件处理程序（如单击）调用（就像打开窗口一样）。
• Internet Explorer将在第一次更新剪贴板时显示权限对话框。
• Internet Explorer和Edge将在文本区域聚焦时滚动。
• 在某些情况下，execCommand（）可能引发。
• 除非使用文本区域，否则换行符和制表符可能会被吞咽。（大多数文章似乎都建议使用div）
• 显示Internet Explorer对话框时，文本区域将可见，您需要将其隐藏，或使用Internet Explorer特定的剪贴板数据API。
• 在Internet Explorer中，系统管理员可以禁用剪贴板API。

下面的函数应该尽可能清晰地处理以下所有问题。如果您发现任何问题或有任何改进建议，请留言。

//将字符串复制到剪贴板。必须从中调用//事件处理程序，如click。如果失败，可能会返回false，但//这并不总是可能的。浏览器支持Chrome 43+，//Firefox 42+、Safari 10+、Edge和Internet Explorer 10+。//Internet Explorer:剪贴板功能可能被禁用//管理员。默认情况下，第一个显示提示//使用剪贴板的时间（每个会话）。函数copyToClipboard（文本）{if（window.clipboardData&&window.cipboardData.setData）{//Internet Explorer特定的代码路径，用于防止在对话框可见时显示文本区域。return window.clipboardData.setData（“文本”，Text）；}else if（document.queryCommandSupported&&document.geryCommandSupported&“复制”）{var textarea=document.createElement（“textarea”）；textarea.textContent=文本；textarea.style.position=“固定”；//防止在Microsoft Edge中滚动到页面底部。document.body.appendChild（文本区域）；textarea.select（）；尝试{return document.execCommand（“副本”）；//某些浏览器可能会引发安全异常。}捕获（ex）{console.warn（“复制到剪贴板失败。”，例如）；return提示符（“复制到剪贴板：Ctrl+C，Enter”，text）；}最后{document.body.removeChild（文本区域）；}}}

https://jsfiddle.net/fx6a6n6x网址/

Answer 4

这是我对这个的看法。。。

功能副本（文本）{var输入=document.createElement（'input'）；input.setAttribute（'value'，text）；document.body.appendChild（输入）；input.select（）；var result=document.execCommand（'copy'）；document.body.removeChild（输入）；返回结果；}

@korayem：注意，使用html输入字段不考虑换行符\n个并将所有文本展平为一行。

正如@nikksan在评论中提到的那样，使用文本区域将按以下方式解决问题：

功能副本（文本）{var输入=document.createElement（'textarea'）；input.inerHTML=文本；document.body.appendChild（输入）；input.select（）；var result=document.execCommand（'copy'）；document.body.removeChild（输入）；返回结果；}

Answer 5

从网页中读取和修改剪贴板会引起安全和隐私问题。然而，在Internet Explorer中，可以做到这一点示例代码段:

<script type=“text/javascript”>函数select_all（obj）{var text_val=评估（对象）；text_val.focus（）；text_val.select（）；r=text_val.createTextRange（）；if（！r.execCommand）return；//特征检测r.execCommand（“复制”）；}</script><输入值=“网址：http://www.sajithmr.com"onclick=“select_all（this）”name=“url”type=“text”/>

Answer 6

如果你想要一个真正简单的解决方案（集成不到5分钟）并且开箱即用看起来很好，那么Clippy公司是一些更复杂解决方案的很好替代方案。

它是由GitHub的一位联合创始人撰写的。Flash嵌入代码示例如下：

<对象classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000”宽度=“110”height=“14”id=“clippy”><param name=“movie”value=“/flash/clippy.swf”/><param name=“allowScriptAccess”value=“always”/><param name=“quality”value=“high”/><param name=“scale”value=“noscale”/><param NAME=“FlashVars”value=“text=#{text}”/><param name=“bgcolor”value=“#{bgcolor}”/><嵌入src=“/flash/clippy.swf”width=“110”height=“14”name=“clippy”质量=“高”allowScriptAccess=“始终”type=“应用/x-shockwave-flash”插件页面=“http://www.macromedia.com/go/getflashplayer"FlashVars=“text=#{text}”bgcolor=“#｛bgcolor｝”/></对象>

记住更换#{文本}您需要复制的文本，以及#{背景色}用一种颜色。

Answer 7

我最近写了一篇技术博客帖子就在这个问题上（我在Lucidchart工作，最近我们对剪贴板做了一次全面检查）。

将纯文本复制到剪贴板相对简单，假设您在系统复制事件（用户按Ctrl键+C类或使用浏览器菜单）。

var isIe=（navigator.userAgent.toLowerCase（）.indexOf（“msie”）！=-1 ||navigator.userAgent.toLowerCase（）.indexOf（“三叉戟”）！=-1);document.addEventListener（“副本”，函数（e）{var textToPutOnClipboard=“这是一些文本”；如果（是）{window.clipboardData.setData（“文本”，textToPutOnClipboard）；}其他{e.clipboardData.setData（'text/plain'，textToPutOnClipboard）；}e.预防违约（）；});

不在系统复制事件期间将文本放在剪贴板上要困难得多。看起来这些其他答案中有一些是通过Flash实现的，这是唯一的跨浏览器方式（据我所知）。

除此之外，还有一些基于浏览器的选项。

这是Internet Explorer中最简单的，您可以通过以下方式随时从JavaScript访问剪贴板数据对象：

window.clipboard数据

（但是，当您尝试在系统剪切、复制或粘贴事件之外执行此操作时，Internet Explorer将提示用户授予web应用程序剪贴板权限。）

在Chrome中，您可以创建一个Chrome扩展剪贴板权限（这是我们为Lucidchart所做的）。然后，对于安装了扩展的用户，只需自己触发系统事件：

document.execCommand（“复制”）；

看起来Firefox已经一些选项它允许用户授予某些站点访问剪贴板的权限，但我个人没有尝试过任何一种方法。

Answer 8

我喜欢这个：

<input onclick=“this.select（）；”type='text'value='copy me'/>

如果用户不知道如何在其操作系统中复制文本，那么他们可能也不知道如何粘贴。因此，只需自动选择它，剩下的留给用户。

Answer 9

剪贴板.js是一个小型的非Flash实用程序，允许将文本或HTML数据复制到剪贴板。它很容易使用，只需包含.js并使用如下内容：

复制按钮<脚本>document.getElementById（'markup-copy'）.addEventListener（'click'，function（）{剪贴板副本({“text/plain”：“标记文本。将我粘贴到富文本编辑器中。'，'text/html/'：'<i>此处</i>是一些<b>富文本</b>'}).然后(function（）{console.log（'success'）；}，函数（err）{console.log（'failure'，err）；});});</script>

clipboard.js也已打开github.

注：现在已弃用此选项。迁移到在这里.

Answer 10

我很成功地使用了这个(没有jQuery或任何其他框架）。

函数copyToClp（txt）{var m=文件；txt=m.createTextNode（txt）；var w=窗口；var b=m.body；b.appendChild（文本）；if（b.createTextRange）{var d=b.创建文本范围（）；d.moveToElementText（txt）；d.选择（）；m.execCommand（“副本”）；} 其他{var d=m.创建范围（）；var g=w.getSelection；d.选择节点内容（txt）；g（）.removeAllRanges（）；g（）.addRange（d）；m.execCommand（“副本”）；g（）.removeAllRanges（）；}txt.remove（）；}

警告

选项卡转换为空格（至少在Chrome中）。

Answer 11

2018年，你可以这样做：

异步复制某物（文本？）{尝试{const-toCopy=文本||location.href；等待navigator.clipboader.writeText（toCopy）；console.log（“复制的文本或页面URL”）；}捕获（错误）{console.error（“复制失败：”，err）；}}

它在我的Angular 6+代码中使用如下：

<button mat-menu-item（click）=“copySomething（）”><span>复制链接</span></按钮>

如果我传入一个字符串，它就会复制它。如果没有，它会复制页面的URL。

还可以做更多的体操练习。请参阅此处的更多信息：

取消阻止剪贴板访问

Answer 12

JavaScript/TypeScript中最简单的方法是使用此命令

navigator.clipboap.writeText（textExample）；

只需将要复制到剪贴板中的值传递到text示例

Answer 13

ZeroClipboard是我发现的最好的跨浏览器解决方案：

单击复制<script src=“ZeroClipboard.js”></script><脚本>var clip=新的ZeroClipboard（document.getElementById（'copy'））；</script>

如果您需要iOS的非Flash支持，只需添加一个回退：

clip.on（'noflash'，函数（客户端，参数）{$（“#copy”）.点击（function（）{var txt=$（this）.attr（'data-clipboard-text'）；提示（“复制链接，然后单击确定”，txt）；});});

http://zeroclipboard.org/

https://github.com/zeroclipboard/zeroclipboard（零剪贴板）

Answer 14

我不愿意再补充一个答案，但为了帮助像我这样的新手，因为这是谷歌的最佳结果，我会的。

2022年将文本复制到您使用的剪贴板单线.

navigator.clipboap.writeText（textToCopy）；

这将返回一个Promise，如果它复制了该Promise，则该Promise将得到解决，如果它失败，则该Promise将被拒绝。

完整的工作功能是：

异步函数copyTextToClipboard（textToCopy）{尝试{等待navigator.clapper.writeText（textToCopy）；console.log（'复制到剪贴板'）}捕获（错误）{console.log（'复制到剪贴板失败。error='+error）；}}

警告！如果您在测试时打开Chrome开发工具，它将失败因为要让浏览器启用剪贴板，它需要您关注窗口。这是为了防止随机网站在你不需要的情况下更改你的剪贴板。开发工具会窃取这个焦点，所以关闭开发工具，你的测试就会生效。

如果你想将其他东西（图像等）复制到剪贴板，请查看这些文档。

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

这在浏览器中得到了很好的支持，您可以使用它。如果您担心Firefox，请使用权限查询来显示或隐藏按钮（如果浏览器支持）。https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query

Answer 15

由于Chrome 42+和Firefox 41+现在支持document.execCommand（“复制”）命令，我使用以下组合为跨浏览器复制到剪贴板功能创建了几个函数Tim Down的老答案和谷歌开发者的答案:

功能选择元素内容（el）{//复制文本区域、pre、div等。if（document.body.createTextRange）{//Internet Explorer（Internet Explorer）var textRange=document.body.createTextRange（）；textRange.moveToElementText（el）；text范围.select（）；textRange.execCommand（“复制”）；}else if（window.getSelection&&document.createRange）{//非Internet Explorervar range=文档.createRange（）；范围。selectNodeContents（el）；var sel=window.getSelection（）；sel.removeAllRanges（）；sel.addRange（范围）；尝试{var成功=document.execCommand（'copy'）；var msg=成功？'成功'：'不成功'；console.log（'复制命令为'+msg）；}捕获（错误）{console.log（'Oops，无法复制'）；}}}//结束函数selectElementContents（el）函数make_copy_button（el）{var copy_btn=文档.createElement（'input'）；copy_btn.type=“按钮”；el.parentNode.insertBefore（copy_btn，el.nextSibling）；copy_btn.onclick=函数（）{选择元素内容（el）；};if（document.queryCommandSupported（“copy”）||parseInt（navigator.userAgent.match（/Chrom（e|ium）\/（[0-9]+）\./）[2]) >= 42) {//复制可与Internet Explorer 4+、Chrome 42+、Firefox 41+、Opera 29配合使用+copy_btn.value=“复制到剪贴板”；}其他{//仅适用于Safari和旧版Chrome、Firefox和Operacopy_btn.value=“全选（然后按Ctrl+C进行复制）”；}}/*注意：document.queryCommandSupported（“copy”）在支持复制的浏览器上应返回“true”，但是Chrome版本42到47中有一个错误，使得它返回“false”。所以在那些Chrome功能检测版本不起作用！请参见https://code.google.com/p/chrome/issues/detail？id=476508*/make_copy_button（document.getElementById（“标记”））；

<pre-id=“标记”>可以通过跨浏览器支持复制或选择的文本。</pre>

Answer 16

我把我认为最好的放在一起了。

• 使用cssText避免Internet Explorer中的异常，而不是直接使用样式。
• 恢复选择（如果有）
• 设置为只读，这样移动设备上就不会出现键盘
• 有一个针对iOS的解决方案，这样它就可以像通常阻止execCommand那样工作。

这里是：

const copyToClipboard=（函数initClipboardText（）{const textarea=document.createElement（'textarea'）；//将其移出屏幕。textarea.style.cssText='位置：绝对；左：-99999 em'；//设置为只读，以防止移动设备在以下情况下打开键盘//文本为.select（）’ed。textarea.setAttribute（'readonly'，true）；document.body.appendChild（文本区域）；返回函数setClipboardText（text）{textarea.value=文本；//检查之前是否选择了任何内容。const selected=document.getSelection（）.rangeCount>0？document.getSelection（）.getRangeAt（0）：false；//iOS Safari在没有此黑客攻击的情况下正常阻止编程execCommand复制。// https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-iosif（navigator.userAgent.match（/ipad|ipod|iphone/i））{const editable=textarea.contentEditable；textarea.contentEditable=真；const range=文档.createRange（）；范围。selectNodeContents（文本区域）；const sel=window.getSelection（）；sel.removeAllRanges（）；sel.addRange（范围）；textarea.setSelectionRange（0，999999）；textarea.contentEditable=可编辑；}其他{textarea.select（）；}尝试{const结果=document.execCommand（'copy'）；//恢复以前的选择。if（选中）{document.getSelection（）.removeAllRanges（）；document.getSelection（）.addRange（选中）；}返回结果；}捕获（错误）{控制台错误（err）；返回false；}};})();

用法：复制到剪贴板（“某些文本”）

Answer 17

其他方法将纯文本复制到剪贴板。要复制HTML（即，可以将结果粘贴到所见即所得编辑器中），可以在Internet Explorer中执行以下操作只有这与其他方法有着根本的不同，因为浏览器实际上可以明显地选择内容。

//创建一个可编辑的DIV并附加想要复制的HTML内容var editableDiv=文档.createElement（“div”）；带有（editableDiv）{contentEditable=true；}editableDiv.appendChild（someContentElement）；//选择可编辑内容并将其复制到剪贴板var r=document.body.createTextRange（）；r.moveToElementText（可编辑分区）；r.选择（）；r.execCommand（“复制”）；//取消选择，以便浏览器不会使元素保持可见选中状态r.moveToElementText（someHiddenDiv）；r.选择（）；

Answer 18

我找到了以下解决方案：

on-keydown处理程序创建一个“pre”标记。我们将内容设置为复制到此标记，然后在此标记上进行选择并在处理程序中返回true。这将调用Chrome的标准处理程序并复制所选文本。

如果您需要它，您可以为恢复先前选择的功能设置超时。我在上的实现框架:

EnybyClipboard（）函数{this.saveSelection=false；this.callback=假；this.pastedText=假；this.restoreSelection=函数（）{if（this.saveSelection）{window.getSelection（）.removeAllRanges（）；for（var i=0；i<this.saveSelection.length；i++）{window.getSelection（）.addRange（this.saveSelection[i]）；}this.saveSelection=false；}};this.copyText=函数（文本）{var div=$（“special_copy”）；if（！div）{div=新元素（'pre'{'id'：'特殊副本'，'style'：'不透明度：0；位置：绝对；顶部：-10000px；右：0；'});div.injectInside（document.body）；}div.set（“文本”，text）；if（document.createRange）{var rng=文档.createRange（）；rng.选择节点内容（div）；this.saveSelection=[]；var selection=window.getSelection（）；for（var i=0；i<selection.rangeCount；i++）{this.saveSelection[i]=selection.getRangeAt（i）；}window.getSelection（）.removeAllRanges（）；window.getSelection（）.addRange（rng）；setTimeout（this.restoreSelection.bind（this），100）；}else返回警报（'复制不起作用。：（'）；};this.getPastedText=函数（）{if（！this.pastedText）警告（'没有要粘贴的内容。：（'）；return this.pastedText；};this.paseText=函数（回调）{var div=$（'特殊粘贴'）；if（！div）{div=新元素（'textarea'{'id'：'特殊粘贴'，'style'：'不透明度：0；位置：绝对；顶部：-10000px；右：0；'});div.injectInside（document.body）；div.addEvent（'keyup'，function（）{if（this.callback）{this.pastedText=$（'special_poste'）.get（'value'）；this.callback.call（null，this.pastedText）；this.callback=假；this.pastedText=假；setTimeout（this.restoreSelection.bind（this），100）；}}绑定（this））；}div.set（'value'，''）；if（document.createRange）{var rng=文档.createRange（）；rng.选择节点内容（div）；this.saveSelection=[]；var selection=window.getSelection（）；for（var i=0；i<selection.rangeCount；i++）{this.saveSelection[i]=selection.getRangeAt（i）；}window.getSelection（）.removeAllRanges（）；window.getSelection（）.addRange（rng）；div.焦点（）；this.callback=回调；}else返回警报（'粘贴失败。：（'）；};}

用法：

enyby_clip=新EnybyClipboard（）；//初始化enyby_clip.copyText（'some_text'）；//将其放入Ctrl+C处理程序并返回true；enyby_clip.pasteText（函数回调（pasted_text））{警报（粘贴文本）；}); // 将其放入Ctrl+V处理程序并返回true；

粘贴时，它会创建一个文本区域，并以相同的方式工作。

PS：也许这个解决方案可以用于创建一个没有Flash的完整跨浏览器解决方案。它适用于Firefox和Chrome。

Answer 19

该代码于2021年5月测试。在Chrome、IE和Edge上工作下面的message参数是要复制的字符串值。

<script type=“text/javascript”>函数copyToClipboard（消息）{var textArea=document.createElement（“textArea”）；textArea.value=消息；textArea.style.opacity=“0”；document.body.appendChild（textArea）；textArea.focus（）；textArea.select（）；尝试{var成功=document.execCommand（'copy'）；var msg=成功？'成功'：'不成功'；alert（'复制文本命令为'+msg）；}捕获（错误）{alert（'无法复制值，错误：'+err.message）；}document.body.removeChild（textArea）；}</script>

Answer 20

使用最新的剪贴板API和用户交互：

copy.addEventListener（“pointerdown”，（）=>navigator.clipboader.writeText（“Hello World！”））

<button id=“copy”>复制Hello World</按钮>

Answer 21

将HTML输入中的文本复制到剪贴板：

函数myFunction（）{/*获取文本字段*/var copyText=document.getElementById（“myInput”）；/*选择文本字段*/copyText.select（）；/*复制文本字段内的文本*/document.execCommand（“复制”）；/*提醒复制的文本*/alert（“复制文本：”+copyText.value）；}

<!-- 文本字段--><input type=“text”value=“Hello Friend”id=“myInput”><!-- 用于复制文本-->的按钮复制文本

注： 这个document.execCommand（）Internet Explorer 9和更早版本不支持该方法。

来源:W3学校-将文本复制到剪贴板

Answer 22

复制文本字段内文本的最佳方法。使用导航器.clipboard.writeText.

<input type=“text”value=“Hello World”id=“myId”>复制文本<脚本>函数myFunction（）{var copyText=文档.getElementById（“myId”）；copyText.select（）；copyText.setSelectionRange（0，99999）；navigator.c剪贴板.writeText（copyText.value）；}</script>

Answer 23

我也遇到了同样的问题，从（类似Excel的东西）构建自定义网格编辑并与Excel兼容。我必须支持选择多个单元格、复制和粘贴。

解决方案：创建一个文本区域，您将在其中插入数据供用户复制（对于我来说，当用户选择单元格时），将焦点设置在该区域上（例如，当用户按Ctrl键)然后选择整个文本。

所以，当用户点击Ctrl键+C类他/她得到他/她选择的复制单元格。测试后，只需将文本区域大小调整为一个像素（我没有测试它是否能在display:none上工作）。它在所有浏览器上都能很好地工作，并且对用户是透明的。

粘贴-您可以这样做（不同于您的目标）-将焦点放在文本区域，并使用onpaste捕捉粘贴事件（在我的项目中，我使用单元格中的文本区域进行编辑）。

我不能粘贴一个例子（商业项目），但你可以理解。

Answer 24

这是对蔡斯·塞伯特的回答它的优点是可以处理IMAGE和TABLE元素，而不仅仅是InternetExplorer9上的DIV。

if（document.createRange）{//Internet Explorer 9和现代浏览器var r=文档.createRange（）；r.setStartBefore（to_copy）；r.setEndAfter（to_copy）；r.selectNode（to_copy）；var sel=window.getSelection（）；sel.addRange（r）；document.execCommand（“复制”）；//在Firefox上什么都不做}其他{//Internet Explorer 8及更早版本。这东西行不通//在Internet Explorer 9上。//（除非强制进入向后兼容模式，//或者选择普通div，而不是img或table）。var r=document.body.createTextRange（）；r.moveToElementText（复制）；r.选择（）r.execCommand（“复制”）；}

Answer 25

我使用了剪贴板.js。

我们可以在npm上获得：

npm安装剪贴板--保存

而且还在鲍尔

bower安装剪贴板--保存

新ClipboardJS（“#btn1”）；document.querySelector（“#btn2”）.addEventListener（“click”，（）=>document.gerySelector（”#btn1“）.dataset.clipboardText=Math.random（））；

<script src=“https://cdn.jsdeliver.net/npm网址/[电子邮件保护]/dist/clipboap.min.js“></script><button id=“btn1”data-clipboard-text=“此处显示要复制的文本”>复制到剪贴板</按钮>单击此处更改数据剪贴板文本<br/><br/><input type=“text”placeholder=“粘贴到此处以查看剪贴板”/>

更多用法和示例请访问https://zenorocha.github.io/clipboard.js/.

Answer 26

我的错。这只适用于Internet Explorer。

这里还有另一种复制文本的方法：

<p>复制</a></p>

Answer 27

这里是简单的用于同一网站的基于Ajax/会话的剪贴板。

请注意，会话必须启用&有效，并且此解决方案适用于同一站点。我在CodeIgniter上测试了它，但遇到了session/Ajax问题，但这也解决了这个问题。如果不想玩会话，请使用数据库表。

JavaScript/jQuery

<script type=“text/javascript”>$（document）.ready（function（））{$（“#copy_btn_id”）.单击（函数（）{$.post（“<？php-echo base_url（）；？>ajax/foo_copy/”+$（this）.val（），空，功能（数据）{//复制成功}，“html”);});$（“#paste_btn_id”）.单击（函数（）{$.post（“<？php-echo base_url（）；？>ajax/foo_paste/”，空，函数（数据）{$（'#paste_btn_id'）.val（数据）；}，“html”);});});</script>

HTML内容

<input type='text'id='copy_btn_id'onclick='this.select（）；'value='myvalue'/><input type='text'id='past_btn_id'value=''/>

PHP代码

<?php（电话）Ajax类扩展了CI_Controller{公共函数foo_copy（$val）{$this->session->set_userdata（数组（'clipboard_val'=>$val））；}公共函数foo_paste（）{echo$this->session->userdata（'clipboard_val'）；退出（）；}}?>