JS实现文本复制功能

最新推荐文章于 2023-06-20 16:56:28 发布
最新推荐文章于 2023-06-20 16:56:28 发布
阅读量3.2k 收藏 1
点赞数 2
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43967603/article/details/101704318
版权
原理：

通过**document.execCommand(“Copy”)**将选中文本复制到剪切板
此方法只对<input>和<textarea>有效，
要复制其他文本，想办法将<textarea>中的vaule变成想复制的内容，然后通过select()方法选择文本，再调用 document.execCommand(“Copy”) 进行复制

实现
<!-- html -->
<p id='sourceTxt'>这是将要复制的文本</p>
最低0.47元/天 解锁文章
LeungZhenPang
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS复制粘贴功能实现
qq_44886882的博客
06-21 4983
本章记录如何通过js代码实现复制内容到剪切板，之后可以粘贴到需要的地方的功能。
JS前端实现网页复制文本（兼容IOS端、微信浏览器 源码解析）
最新发布
burgessbin的博客
04-12 994
该方法在 **ios浏览器和微信浏览器** 中复制无效，判断navigator.clipboard是存在的，但就是writeText时出错，显示拒绝。使用第三方库，例如 `clipboard`
JavaScript实现点击复制（JS访问剪贴板相关）
weixin_45092437的博客
04-06 9609
document.execCommand()方法用来操作当前聚焦的可编辑元素（`input`、`textarea`）中的内容，例如复制、剪贴、粘贴、删除、文本加粗、插入图片等等效果。 Clipboard API 提供了响应剪贴板命令和异步读写系统剪贴板的能力，该API是用来取代document.execCommand() 这种剪贴板访问方式的。
js实现复制文本
lg7955的博客
09-01 2956
js实现复制文本。
js 点击按钮复制文本方法
weixin_42333548的博客
02-20 1万+
<span class="copyMa" @click="copy()">点击复制</span> copy(){ let random = this.$refs.randomCodeRef.innerHTML; const input = document.createElement('input'); ...
js实现点击按钮复制文本功能
12-09
如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用 copy 命令，将文本复制到剪切板 但是 select() 方法只对 <input> 和 <textarea> 有效，对于 <p> 就不好使 最后我的解决方案是，在...
JS文本复制JS文本复制
09-27
在JavaScript中实现文本复制主要涉及Web API中的`Clipboard API`，但需要注意的是，出于安全和隐私考虑，浏览器对这一API的使用有严格的限制。通常，你需要通过`navigator.clipboard.writeText()`方法来写入文本到...
js插件clipboard实现复制文本的功能
02-20
这个库封装了Clipboard API，提供了一种简单的方式来实现复制功能，无需关心浏览器兼容性问题。你可以在HTML元素上添加特定的数据属性，然后在初始化插件时配置这些元素的行为： ```html 要复制的文本">复制 ...
js实现一键复制功能
12-08
目前能够实现复制功能的方法有以下几种： execCommand(“copy”); clipboardData; ZeroClipboard.js 1.execCommand:是doucment对象的方法,可以实现浏览器菜单的很多功能，如保存文件，打开新文件，撤销，复制，...
前端实现复制文字操作
qq_41632427的博客
06-20 93
​ 目录 前言 导语 核心代码 前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 前端实现复制文字操作 ​编辑 核心代码 copyTitle(certB64) { ...
JavaScript：实现复制粘贴剪切功能
热门推荐
lalala_dxf的博客
12-30 2万+
ClipboardAPI是下一代的剪贴板操作方法，比传统的方法更加强大、更合理。
Js实现文本复制
明知山
09-11 275
function copyText() { var ctx = document.createElement("input"); var content = "需要复制的内容"; ctx.setAttribute("value", content); document.body.appendChild(ctx); ctx.select(); document.execCommand("copy"); ...
vue 点击复制到粘贴板
王博的博客
05-28 555
背景：业务开发中遇到，点击复制内容到粘贴板的需求，记录一下 效果： 关键代码: copyText() { const oInput = document.createElement('input') oInput.value = this.textarea document.body.appendChild(oInput) oInput.select() document.execCommand('Copy') this..
JS实现文本复制，剪切板复制（极简主义）
Jerry_wo的博客
08-03 1146
国外网站看见的代码。 JS实现前端文本的复制（ctrl+c）， 代码非常简洁。 代码： <input type="button" value="Copy Link" class="btn_small" onclick="document.querySelector('input[name=banner728x90]').select(); document.execCommand('copy');" data-popup3="Q29Vk"> ...
前端-一件复制文本内容
qq_40408712的博客
04-21 852
<!DOCTYPE html> <html lang="en"> <head> <title>点击复制</title> </head> <body> <div id="mountNode"></div> <script> //只可复制input、textarea等表单元素 function copy2(){ var tar = document.get
js 实现点击后复制文本
07-22
要实现点击后复制文本的功能，你可以使用以下 JavaScript 代码： ```javascript function copyText() { // 获取要复制的文本 var textToCopy = document.getElementById("copytext-plate-output").value; // 创建一个临时的 textarea 元素 var tempTextarea = document.createElement("textarea"); tempTextarea.value = textToCopy; // 将 textarea 元素添加到文档中 document.body.appendChild(tempTextarea); // 选中 textarea 中的文本 tempTextarea.select(); // 复制文本 document.execCommand("copy"); // 移除临时的 textarea 元素 document.body.removeChild(tempTextarea); // 提示复制成功 alert("文本已复制到剪贴板"); } ``` 在你的 HTML 中，添加一个触发复制操作的按钮，并为其添加一个点击事件处理程序： ```html <button onclick="copyText()">复制文本</button> ``` 当用户点击按钮时，`copyText` 函数将获取要复制的文本，创建一个临时的 textarea 元素，将文本设置为其值，并将其添加到文档中。然后，它选中 textarea 中的文本，并使用 `document.execCommand("copy")` 命令复制文本到剪贴板。最后，它移除临时的 textarea 元素，并提示复制成功。 请确保将按钮的 `onclick` 属性设置为 `copyText()`，以便在用户点击按钮时调用 `copyText` 函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值