如何使用JavaScript复制指定的文本？

CgbAutoit

于 2023-09-20 12:25:04 发布

阅读量320

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言 js

本文链接：https://blog.youkuaiyun.com/CgbAutoit/article/details/133073284

js 专栏收录该内容

300 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了在JavaScript中复制文本的两种方法：一是利用document.execCommand()，通过创建元素、选中文本及执行复制命令实现；二是使用Clipboard API的writeText()方法，它在安全上下文中运行并返回Promise。根据浏览器支持和项目需求，开发者可以选择合适的方法。

在JavaScript中，可以使用不同的方法复制指定的文本内容。下面我将介绍两种常用的方法：使用document.execCommand()和使用Clipboard API。

方法一：使用document.execCommand()方法

function copyText(text) {
   
   
  var input = document.createElement('textarea');
  document

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CgbAutoit

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

JS的 execCommand 方法实现一个简单的富文本编辑器

越努力，越幸运！

04-02

5670

一、document.execCommand() 从其名字上可以看出execCommand()是用来执行命令的，当一个HTML文档切换到设计模式时，document暴露execCommand方法，该方法允许运行命令来操纵可编辑内容区域的元素。如保存文件、打开新文件、撤消、重做、剪切、复制、删除，字体大小、背景颜色等操作，有了这个方法就可以很容易的实现网页中的文本编辑器【1】语法 let bool = document.execCommand(aCommandName, aShowDefa...

一键复制（js或插件）

最新发布

insist_life的博客

02-07

1034

2.1 在html标签上直接使用（注，下面的方法，复制成功后，没有相应的页面反馈；以上就是前端复制的简单实现，方便后续再用到的时候，快速回忆。使用插件 clipboard实现文本复制。

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

js复制文本（兼容IE、火狐）

03-30

NULL 博文链接：https://curtain.iteye.com/blog/1328750

JS复制文本

扶摇的博客

07-05

1960

这里为什么使用textarea标签？因为textarea标签支持换行、制表等。示例1：复制input输入框的内容。示例2：复制textarea内容，以换行形式输出。示例3：复制textarea内容，以表格和换行形式输出。

js 实现复制指定内容功能

小雨

12-08

1043

参考了网友的写法,记录一下点击按钮复制指定的内容 <el-button type="primary" @click="copyBtn">复制url</el-button> js代码: copyBtn() { let url = '111111' let txa = document.createElement("textarea"); txa.value = url; document.body.appendC

JavaScript实现点击按钮复制指定区域文本(推荐)

11-30

总结来说，JavaScript实现点击按钮复制指定区域文本的核心在于创建并操作`Range`和`Selection`对象，以及使用`document.execCommand('copy')`命令。通过理解这些概念和技术，开发者可以为网页添加便捷的复制功能，...

jQuery复制按钮复制指定文本

12-30

接下来，我们需要指定要复制的文本。这里可以使用一个`<div>`或`<p>`元素包裹需要复制的文本： ```html 这是一段需要复制的文本。 ``` 现在，我们使用jQuery编写JavaScript代码来实现复制功能。在`<script>`标签内...

clipboard.js 点击复制指定文本源码

05-07

`clipboard.js`通过监听用户的点击事件，获取到需要复制的文本，并调用`Clipboard API`的`writeText`方法将文本写入剪贴板。在不支持`Clipboard API`的浏览器中，它会使用模拟点击textarea元素的方式达到复制效果。 ...

js复制文本

yenaYu的博客

08-23

362

/** * 复制文本 * @param {*} domTarget 要复制的目标dom * @param {*} targetText 要copy到粘贴板的文本 */ async copyText(domTarget, targetText = '') { return new Promise((fulfill, reject) => { let text = targetTe...

js-复制文本

Dronwing fish

09-18

631

js-复制文本第一次尝试-从输入框复制第二次优化-从其他地方复制最终优化-小bug优化在实现需求时会遇到了点击某一文本，将其内容复制到粘贴板的功能。虽然现在已经有了很多方便快捷的组件（例如第三方库：clipboard.js），但是考虑到兼容性等问题，我还是选择了通过js原生方法document.execCommand()来实现这个功能。使用框架：vue。第一次尝试-从输入框复制使用docu...

移动端js复制功能，点击复制按钮，就可以复制指定的内容

06-21

适用于移动端js实现复制功能，点击按钮，提示“复制成功”，经常用来复制订单编号和快递单号等，避免用户手动输入的麻烦

js 复制文本功能

小范先生上行中的博客

09-05

1324

【代码】js 复制文本功能。

JS 一键复制指定内容

m0_60067558的博客

10-24

530

无

JS实现复制文本功能

qq_44704740的博客

12-01

940

核心api: textArea.select(); 代替手动实现自动选中文本 document.execCommand("Copy") 复制选中内容到剪贴板，返回值是一个boolean值，如果是 false 则表示操作不被支持或未被启用。了解更多废话少说直接上代码 // 1. 创建 // 自调用Clipboard函数返回值为一个对象，该对象有一个copy方法，将该对象挂到全局window上，以便在项目的任何地方都能使用 window.Clipboard = (function (window, d.

js复制指定文本内容工具方法

qq_45560350的博客

08-12

381

// 传入要复制的内容即可 copy(data) { let input = document.createElement("input"); // 直接构建input input.setAttribute("readonly", "readonly"); //设置只读，否则移动端会有键盘弹出 input.value = data; // 设置内容 document.body.appendChild(input); // 添加临时实例 i.

js实现复制文本

lg7955的博客

09-01

3070

js实现复制文本。

使用JavaScript实现点击复制文本功能

如果不存在，我们创建了一个临时的`<textarea>`元素，并使用`document.execCommand('copy')`方法来复制文本。最后，我们需要注意的是，使用`document.execCommand('copy')`方法在未来的浏览器版本中可能会被废弃，...