提示execCommand 被弃用？JS点击复制文字的替代办法

最新推荐文章于 2024-06-04 20:31:24 发布
最新推荐文章于 2024-06-04 20:31:24 发布
阅读量1.5w 收藏 22
点赞数 21
分类专栏： 小知识 JS 随笔 文章标签： safari 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45524834/article/details/121946860
版权
小知识 同时被 3 个专栏收录
13 篇文章 1 订阅
订阅专栏
JS
11 篇文章 0 订阅
订阅专栏
随笔
6 篇文章 0 订阅
订阅专栏

前端在页面实现点击复制功能，一般都会使用document.execCommand；虽然现在还能用，但是会提示你即将被废弃，找了一个替代方法，基于Promise，不用像execCommand一样还得选中范围；看了一下兼容性也挺不错的

navigator.clipboard.writeText(value);

 navigator.clipboard.writeText(value).then(() => {});

相关文档： Clipboard.writeText()

不会做饭的程序员
关注
  • 21
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端复制内容到剪贴板，新老js方法示例
cherry__yu的博客
11-05 948
document.execCommand() 传统方法，兼容性好，但已弃用。 问题是该方法只能复制选中的文本，就是说在复制前需要用到select将内容先选中。例 const inputElement = document.querySelector('#input'); inputElement.select(); document.execCommand('copy'); 如果不是复制DOM元素里的内容，而是在JS中的任意文本. 要先创建一个元素，将要复制的值放进去，再选中、复制，最后记得要移除这个元素
js实现点击按钮复制文本功能
10-18
主要为大家详细介绍了原生js实现点击按钮复制文本的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript execCommand函数
最新发布
Python老吕的博客
06-04 977
虽然在早期网页开发中扮演了重要角色，但由于其存在的问题和局限性，现在已不再推荐使用。相反，我们应该积极拥抱现代 Web API，利用它们提供的强大功能和灵活性来实现更优秀的编辑体验。通过不断学习和掌握新技术，我们可以不断推动网页编辑技术的发展和创新。👨‍💻博主Python老吕评论，您的举手之劳将对我提供了无限的写作动力！🤞') # 每日一码，使用Python跟世界说Hello,World!🔥《Python全栈工程师》《跟老吕学MySQL》《Python游戏开发实战讲解》🌞。
javascript execCommand
空気力学少女の诗
12-21 1705
前几天试着不靠任何现成的命令实现一个富文本编辑器，踩了无数坑后选择狗带，最后还是投向了execCommandexecCommand这个方法不是所有浏览器都支持的 execCommand API 介绍前提如果你要对某个节点使用execCommand命令，对这个节点设置contentEditable= true 例如<p contentEditable=true>test</p>语法execComm
JavaScript document的execCommand被废弃，复制文本该使用什么方法
lanfeng1314的博客
08-10 2303
使用navigator.clipboard.writeText(value)，相比以前更加简洁，采用promise实现。
html中的内容直接下载到excel中，替换 document.execCommand(‘saveAs’)方法
03-22
html中的内容直接下载到excel中的demo，替换 document.execCommand(‘saveAs’)方法
execCommand替代方案Clipboard，实现JS复制到剪贴板
huanglgln的专栏
12-20 6187
execCommand、Clipboard
一键复制文本实现（navigator.clipboard 和 execCommand(废弃)）
张兴华的博客
05-29 4246
execCommand 已经被废弃了，所以不要再使用了！ 使用 navigator.clipboard.writeText(value); 相比以前更加简洁。 //旧： let oInput = document.createElement('input'); oInput.value = value; document.body.appendChild(oInput); oInput.select(); // 选择对象; document.execCommand("Copy"); // 执行浏览器复制命令
DEPRECATED: Use of this script to execute hdfs command is deprecated。
now
10-29 7711
DEPRECATED: Use of this script to execute hdfs command is deprecated. Instead use the hdfs command for it. 不推荐：不推荐使用此脚本执行hdfs命令。 而是使用hdfs命令。 本人安装的hadoop版本是2.4.0的，但每次执行命令时都会显示下面的信息 hadoop@VM_160_34_centos:/usr/local/hadoop-2.4.0> hadoop dfs -ls ..
替换IE浏览器才能识别的document.execCommand(‘SaveAs‘,false,‘Test.xls‘)两种方法
qq3892997的博客
03-22 1439
原文：html页面导出为excel表格 - 别动我的猫 - 博客园 (cnblogs.com) document.execCommand('SaveAs',false,'Test.xls'); //该方法只在IE中支持，谷歌/edge都无法识别， //因IE不再被微软推荐使用，手上多个项目需要整改 借鉴网上已有的例子实现在其他浏览器正常下载页面表格到Excel： <!DOCTYPE html> <html> <head> <meta charse.
document.execCommand()的用法小结
09-04
本篇文章主要是对document.execCommand()的用法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
javascript 的execCommand和操作剪贴板
09-01
javascript 的execCommand和操作剪贴板的收集
用 javascript 实现的点击复制代码
10-30
此外，还有其他方式实现复制，例如通过`document.execCommand('copy')`，但这个方法在某些现代浏览器中可能已被弃用。为了更兼容的解决方案，可以使用第三方库如`clipboard.js`或`zeroclipboard`。 例如，使用`...
JS简单实现点击复制链接的方法
10-21
在JavaScript中，实现点击按钮复制文本到剪贴板的功能是一个常见的需求，特别是在处理链接或重要信息时。这里我们将探讨两种简单的方法来实现这个功能，主要适用于网页应用。 ### 方法一：使用`window....
JS点击复制剪贴板鼠标点击文字弹出复制链接按钮
11-11
在前端开发中，实现"JS点击复制剪贴板鼠标点击文字弹出复制链接按钮"的功能是一种常见的需求，尤其是在网页交互和用户体验优化上。这一功能可以让用户更方便地获取和分享页面上的链接，提升网站的易用性。下面将详细...
JS实现移动端点击按钮复制文本内容
10-16
本篇文章将深入探讨如何使用JavaScript实现移动端点击按钮复制文本内容的功能。首先，我们来分析提供的代码片段。 ```html 邀请码 <!-- <p id="inviteCode" class="inviteCode">{{invite_code}}</p> --> 复制...
JavaScript 点击触发复制功能实例详解
10-17
JavaScript点击触发复制功能是一种常见的用户交互设计，它允许用户通过简单的点击操作就能快速复制文本内容。在网页开发中，这种功能常用于复制密码、链接、代码片段等信息，提高用户体验。本文将详细介绍如何使用...
重新实现Document.ExecCommand（）
weixin_26752759的博客
09-12 3249
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it. — MDN web docs 此功能已过时。 尽管它可能在某些浏览器中仍然可以使用，但不...
vue3 点击复制文字
07-12
在Vue 3中，你可以通过以下步骤实现点击复制文字的功能： 1. 首先，在Vue组件中，定义一个data属性来存储要复制的文字。例如，可以在data中添加一个属性名为`textToCopy`，并设置初始值。 ```javascript data() { return { textToCopy: '要复制的文字' }; } ``` 2. 然后，在模板中添加一个按钮或其他元素，并绑定一个点击事件。 ```html <button @click="copyText">复制</button> ``` 3. 在Vue组件的方法中，定义`copyText`方法来处理点击事件。 ```javascript methods: { copyText() { // 创建一个新的textarea元素 const textarea = document.createElement('textarea'); // 将要复制的文字赋值给textarea的value属性 textarea.value = this.textToCopy; // 将textarea元素添加到DOM中 document.body.appendChild(textarea); // 选中textarea中的文字 textarea.select(); // 执行复制操作 document.execCommand('copy'); // 移除textarea元素 document.body.removeChild(textarea); } } ``` 以上代码中，我们通过创建一个新的textarea元素，并将要复制的文字赋值给它的value属性。然后，将这个textarea元素添加到DOM中，并选中其中的文字。接着，使用`document.execCommand('copy')`命令执行复制操作。最后，移除这个临时创建的textarea元素。 这样，当点击按钮时，就会将`textToCopy`中的文字复制到剪贴板中。你可以根据自己的需要修改`textToCopy`的值，来实现不同的复制文字功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不会做饭的程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值