Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >原生 JS 实现复制功能

原生 JS 实现复制功能

作者头像
lonelydawn
发布于 2021-10-19 07:43:12
发布于 2021-10-19 07:43:12
8.2K00
代码可运行
举报
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input id="target" type="text" >
	<button onclick="onCopyClick()">复制</button>
	<script type="text/javascript">
		function copyToClipboard (text) {
			if (!document.createRange || !window.getSelection || !document.execCommand) {
				return false;
			}
			const node = document.createElement('span');
			node.innerText = text;
			document.body.appendChild(node);
			const range = document.createRange();
			range.selectNode(node);
			const selection = window.getSelection();
			selection.empty();
			selection.addRange(range);
			document.execCommand('copy');

			selection.empty();
			range.detach();
			document.body.removeChild(node);

			return true;
		}
		function onCopyClick () {
			const target = document.getElementById('target');
			copyToClipboard(target.value);
		}
	</script>

copyToClipboard 方法用来实现复制功能,实现过程:

  1. 创建一个 span
  2. 选中span节点内容
  3. 使用 document.execCommand('copy')将选中内容加入剪贴板
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
原生js 复制内容到剪切板
1. document.execCommand("Copy") 触发复制监听事件
WahFung
2020/08/24
7.5K0
简单实现点击复制
在文章中插入大量无意义内容一不美观,二不便复制,不如使用 js 创建隐藏内容的复制按钮吧。
季春二九
2023/03/22
1.9K0
Typecho 给代码块添加复制功能
在主题目录下建立一个js文件放置到js目录 添加以下: var codeblocks = document.getElementsByTagName("pre") //循环每个pre代码块,并添加 复制代码 for (var i = 0; i < codeblocks.length; i++) { //显示 复制代码 按钮 currentCode = codeblocks[i] currentCode.style = "position: relative;" var copy = document.cr
团团生活志
2022/08/16
1.1K0
【译】JavaScript实现文字剪贴板&amp;React版本
目录 怎么使用JavaScript实现一个剪贴 上面的方法不是很完美我们优化一下 思考一个问题 使用react和typescript重写和优化一下 如何使用copyme 原文参考 写在最前面 有一个简单的需求,用户需要快捷的复制一些相关的信息,然后进行下一步信息的填写。前端这里需要做一个剪贴板方便用户体验。想直接参考 react 使用的可以看 使用react和typescript改写和优化一下 大概设计如下,有多条信息,然后用户可以点击右边的复制 icon 进行快捷的复制。 怎么使用JavaScr
西南_张家辉
2022/09/16
8940
【译】JavaScript实现文字剪贴板&amp;React版本
H5 的复制操作
作者:villainthr 一开始,在 Web 端,并没有任何可以接触到 clipborad 的内容。以前,我们想要执行 copy/paste/cut 只能借助 flash。但现在,伟大的 H5 又或
腾讯IVWEB团队
2017/05/10
6.2K2
【译】JavaScript实现文字剪贴板&React版本
目录 怎么使用JavaScript实现一个剪贴 上面的方法不是很完美我们优化一下 思考一个问题 使用react和typescript重写和优化一下 如何使用copyme 原文参考 写在最前面 有一
西南_张家辉
2021/02/02
5670
造一个 copy-to-clipboard 轮子
用 JS 来复制文本在网页应用里十分常见,比如 github 里复制 remote 地址的功能:
写代码的海怪
2022/03/29
9780
造一个 copy-to-clipboard 轮子
在微信浏览器中使用JavaScript实现文本复制功能
在开发Web应用时,我们常常需要为用户提供方便的功能,其中一个就是文本复制。然而,在移动端的一些浏览器中,直接使用JavaScript复制文本可能会遇到问题,特别是在微信浏览器中。本篇博客将为您介绍如何使用JavaScript在微信浏览器中实现文本复制功能。
高老师
2023/08/07
1.5K0
JS 实现复制粘贴功能
接下来,介绍他的使用方式,前提条件,下载clipboard.min.js插件,下载地址:在这里
White feathe
2021/12/08
5.1K0
JS 实现复制粘贴功能
h5仿微信web端|仿wechat网页聊天实战
《H5+CSS3微信h5微场景实战开发》仿微信H5电脑端聊天场景项目案例、h5仿微信聊天界面
andy2018
2018/06/14
4.3K0
h5仿微信web端|仿wechat网页聊天实战
vue.js聊天IM系统|聊天室|群聊
基于vue+vuex+vue-router+webpack2.0+es6+wcPop+iconfont等技术开发的仿微信界面聊天室,之前使用h5开发过一版h5聊天室,实现了微信聊天功能、发送消息/表情,图片、视频预览,打赏、红包等功能。
andy2018
2019/04/05
13.1K2
vue.js聊天IM系统|聊天室|群聊
【字节】浏览器中如何实现拷贝到剪贴板功能
穆斯黑德湖附近的Norcross Brook河与湿地,缅因州皮斯卡特奎斯(© Aaron Black-Schmidt/Tandem Stills + Motion)
山月
2021/05/11
6750
如何实现选中复制的功能
它一般可以使用第三方库 clipboard.js[1] 来实现,源码很简单,可以读一读
山月
2020/06/04
2.6K0
js让光标选择节点中部分文本
Range的MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/Range/setStart
阿超
2022/08/21
3.1K0
js让光标选择节点中部分文本
网页上的复制与剪切
IE 10及以上的版本修改了Document.execCommand()方法,增加了对剪切和复制的支持。Chrome从43版本开始也支持了这项特性。
mmzhou
2018/08/01
1.7K0
快来领取,33个常用JavaScript功能已封装成方法,拿来即用
在实际开发中,为了提高开发的效率,我们会把常用到的功能封装成方法,这样后期开发需要,拿来即用。
艾编程
2022/12/04
2.9K0
快来领取,33个常用JavaScript功能已封装成方法,拿来即用
h5实现长按复制文本_ios13如何复制链接
安卓实现起来没问题,有时候ios会报错,无奈手边也没有iPhone手机,折腾了好几次才完成,直接上关键代码
全栈程序员站长
2022/11/10
2.4K0
h5实现长按复制文本_ios13如何复制链接
富文本编辑器开发简介
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。
江米小枣
2020/06/15
4.9K0
Mirages短代码使用
支持 m3u8、mp4,flv 和 mkv 格式,不过编码必须是 H.264 AAC
ZGGSONG
2022/09/09
2.6K0
Mirages短代码使用
JavaScript 中获取光标位置
DOM中并没有直接获取光标位置的方法,那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围,我们可以以此为切入点,来获取或定位光标的位置,当选取范围起始点和结束点一样时,就是光标插入的位置。
越陌度阡
2020/11/26
13.1K0
相关推荐
原生js 复制内容到剪切板
更多 >
LV.0
上海软科教育信息咨询有限公司前端开发工程师
交个朋友
加入前端学习入门群
前端基础系统教学 经验分享避坑指南
加入腾讯云技术交流站
前端技术前沿探索 云开发实战案例分享
加入云开发企业交流群
企业云开发实战交流 探讨技术架构优化
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档