js如何将内容添加到剪切板？

原创

已于 2022-03-22 17:21:41 修改 · 8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#js

于 2021-01-29 12:13:31 首次发布

本文介绍了两种更新的代码技巧，一是过时但仍在使用的`document.execCommand`，二是推荐的现代方法`Clipboard API`，演示了如何通过这两种方式实现在网页中复制文本并提供提示。

话不多说，直接上代码

方式1:

使用： document.execCommand
注意：即将被弃用了

copyToClip(content,tips) {
   
   
      console.log("复制的内容", content,'复制成功后的提示文本',tips);
      var ele = document.createElement("input"); //创建一个input标签
      ele.setAttribute("v

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dark_programmer

关注关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript 读写剪贴板之方式汇总

oscar999的专栏

04-11

1万+

JavaScript操作剪贴板虽然存在安全问题，但在某些应用场景下还是很方便的，比如复制一个link 等，JavaScript操作剪贴板的方式有：方式1. 使用navigator 的Clipboard 对象方式2. 使用 document.execCommand 方式3. window.clipboardData 对象方式4. 使用一些封装的第三方库

JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)

10-20

这个函数接收触发复制操作的元素作为参数，并返回一个DOM元素，这个元素的内容将被复制到剪切板上。在页面上如果有多个需要复制内容的按钮，可以通过定义不同的选择器来区分。ClipboardJS允许通过类名或者id来指定...

4 条评论您还未登录，请先登录后发表或查看评论

js 实现 Javascript操作剪贴板

03-30

js 实现 Javascript操作剪贴板! 值得下载看看!资源免费,大家分享!!

js实现剪贴板操作

06-07

jquery-zclip框架demo，文件夹需要放到web工程目录下，动态拷贝textarea中的文本内容到系统clipboard中

【技术】JS 操作剪贴板

最新发布

Riu_Peter

06-16

1433

navigator 对象在使用时有弊端，仅在安全域环境下生效。安全域环境是指：https 请求、localhost、127.0.0.1 作为请求的情况。原因是浏览器的安全限制，不希望代码随意访问用户的剪贴板。在博客类网站看到一段代码，想复制，如果代码量比较大，选中内容复制会比较麻烦。多数情况下会在代码右上角看到一个复制按钮，点击即可复制代码，是如何实现的呢？navigator 对象的使用弊端可以曲线救国，通过监听粘贴事件实现相关业务。编写 copyVal() 方法。// 获取内容的组件。

JS设置剪切板内容

底层码农

07-11

1841

JS设置剪切板内容

JS复制内容到剪切板的实例代码(兼容IE与火狐)

10-26

### 知识点八：使用`setTransferData`添加剪切板数据在火狐浏览器中，使用`setTransferData`方法向`nsITransferable`对象添加数据。这个方法允许我们添加多个数据类型，但在此示例中，我们添加的类型是`text/...

js clipboard 复制文字到剪切板功能

12-02

JavaScript中的剪切板操作是Web开发中的一个常见需求，它允许用户方便地复制网页上的文本内容到系统剪切板，以便在其他地方粘贴。在本文中，我们将深入探讨如何实现"js clipboard 复制文字到剪切板功能"，并确保其在...

JS_FF--IE (兼容_数据直接添加到剪切板)

06-03

"JS_FF--IE (兼容_数据直接添加到剪切板)" 的主题是关于如何在Firefox（FF）和Internet Explorer（IE）中编写兼容的代码，以便用户可以将特定的数据直接添加到剪贴板。 **在IE中的实现：** IE浏览器提供了`window....

通过JS实现剪贴板操作

赤蓝紫の博客

12-16

3391

通过JS实现剪贴板操作在网上找到很多种方法，ZeroClipboard.js、clipboard.js插件等，但是都没有办法解决本人项目中的问题，最后发现可以通过navigator对象得到clipboard，进行剪切板操作先来一下clipboard.js版本的热热身。 1. clipboard.js 1.1 通过text的function()来复制内容 <!DOCTYPE html> <html lang="en"> <head&g

js操作剪切板

weixin_46787337的博客

11-20

2772

1.向剪切板写入图片等任意的数据到剪贴板。这个方法可以用于实现剪切和复制的功能,是异步的 const copy = navigator.clipboard.write(参数为要写入剪切版的数据) copy.then(()=>{},()=>{}) 2.Clipboard.read()用于读取剪切板的数据，也是异步的成功返回数据 const promise = navigator.clipboard.read(); promise.then(()=>{},()=>{}) ...

JavaScript将文本复制到剪贴板

张赐荣的技术博客

03-29

1372

【文 / 张赐荣】下面这段代码是一个 JavaScript 函数，将指定的文本复制到剪贴板中。它使用了 Clipboard API ，同时还考虑了浏览器的兼容性问题。

JavaScript：实现复制粘贴剪切功能

热门推荐

lalala_dxf的博客

12-30

3万+

ClipboardAPI是下一代的剪贴板操作方法，比传统的方法更加强大、更合理。

js 写剪切板

QER 的博客

11-11

831

async function copyText(text, successText) { try { await navigator.clipboard.writeText(text); information('success', successText); } catch (err) { information('error', `复制失败: ${err}`); }

JavaScript 实现文本写入剪贴板

qq_15781179的博客

05-27

729

function xyz_copy(str){ var w = document.createElement('input'); w.value = str; document.body.appendChild(w); w.select(); document.execCommand("Copy"); w.style.display='none'; } xyz_cpoy("aaa") 直接上代码创建input元素，给input传值，将input放入html里，选择input 再调用浏览器的复

js将文本复制（写入）剪贴板的两种常用方法

weixin_46333911的博客

12-09

4619

js 操作剪切板

js 复制文本设置复制内容设置剪贴板内容

07-01

379

js 复制文本设置复制内容设置剪贴板内容window.clipboardData.setData("Text", value)

js操作剪贴板讲解

曹定栓的博客

08-15

3820

在操作系统级别，剪贴板允许应用程序之间传输数据。在现代web应用中，提供复制、剪切、粘贴等与剪贴板交互的功能已成为标配，极大的提高了用户的便利性。但由于涉及到跨域和隐私问题，浏览器对这种交互进行了严格的限制。例如，当前浏览的网站不应能够无授权地访问从另一来源的网站复制的内容。这样可以防止恶意网站读取或修改剪贴板内容，确保用户数据的安全。