Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js将内容复制到剪贴板

js将内容复制到剪贴板

作者头像
OECOM
发布于 2020-07-01 09:35:27
发布于 2020-07-01 09:35:27
4.4K00
代码可运行
举报
文章被收录于专栏:OECOMOECOM
运行总次数:0
代码可运行

在js中通过点击事件来触发复制到剪贴板,通过js的document.execCommand("Copy");语法可以实现复制功能,但是首先需要将文本选中,来看一下实际代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript">
function copyUrl2()
    {
        var Url2=document.getElementById("biao1").innerText;
        var oInput = document.createElement('input');
        oInput.value = Url2;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.parentNode.removeNode(oInput);
        alert('复制成功');
    }
</script>
<div cols="20" id="biao1">12345678</div>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-03-05,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript操作剪贴板
在网页中一般是不允许访问剪贴板内容的,因为这样存在着很大的安全隐患。在IE和FireFox中剪贴板的访问是可控的,但是在Opera、Chrome、Safari浏览器中是不允许访问的,这样就产生了浏览器兼容的问题。
恋喵大鲤鱼
2018/08/03
3.2K0
JS自定义右键菜单—复制到粘贴板(jQuery和原生JS实现)
自定义右键菜单——复制到粘贴板 需求: 鼠标在li标签上点击右键出现菜单,主要是复制等功能 屏蔽浏览器默认右键点击事件 右键菜单出现在鼠标点击的位置 点击屏幕其他位置菜单消失 点击之后有回调 实现: 1、使用jQuery - 右键菜单插件contextMenu 在项目中引入jquery.contextMenu.js 和 jquery.contextMenu.css, 同时 contextMenu 依赖 jQuery。 初始化插件 $.contextMenu({ selector: 'li',
从入门到进错门
2018/08/21
5.3K0
JS自定义右键菜单—复制到粘贴板(jQuery和原生JS实现)
用ChatGPT做文本处理工具——去除链接工具
由于我需要将一段文本中的链接全部清理掉,网上并没有找到相应的工具,还不如自己做一个。
半夜喝可乐
2023/07/27
4870
用ChatGPT做文本处理工具——去除链接工具
JS实现复制内容到剪贴板的方法
复制方法 /** * 复制功能 * text 传入要复制的文本 * callback 复制完成后的回调 */ function copy(text, callback) { // 实现复制方法一: if (navigator.clipboard) { navigator.clipboard.writeText(text); callback && callback(true); return; } // 实现复制方法二:
别盯着我的名字看
2022/06/09
2.9K0
js实现网站无感复制,用户访问网站自动复制内容到剪贴板。
有时候,我们希望用户访问我们网站就自动复制指定内容到用户剪贴板。 比如支付宝赞赏码什么的..... 但是这样的不好的地方就是会对用户的体验有影响,每次用户访问就会复制一次。
吃猫的鱼Code
2023/02/02
2.5K0
前端技巧——js篇
复制操作 copy () { let url = this.code; let oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput); oInput.select(); // 选择对象 console.log(oINput.value); document.execCommand('Cooy'); // 执行浏览器复制命令 alert
流眸
2019/08/12
2.2K0
【译】JavaScript实现文字剪贴板&React版本
目录 怎么使用JavaScript实现一个剪贴 上面的方法不是很完美我们优化一下 思考一个问题 使用react和typescript重写和优化一下 如何使用copyme 原文参考 写在最前面 有一
西南_张家辉
2021/02/02
5740
简洁高效的单号转换工具:提升编程效率
在日常的编码工作中,我们经常需要处理各种单号:订单号、物流单号、批次号等等。而这些单号往往以一行行的文本形式呈现,不便于直接使用。为了提高编程效率,我们开发了一款简洁高效的单号转换工具,帮助你快速地转换和格式化单号数据。
疯狂的KK
2023/07/18
1.3K0
简洁高效的单号转换工具:提升编程效率
【译】JavaScript实现文字剪贴板&amp;React版本
目录 怎么使用JavaScript实现一个剪贴 上面的方法不是很完美我们优化一下 思考一个问题 使用react和typescript重写和优化一下 如何使用copyme 原文参考 写在最前面 有一个简单的需求,用户需要快捷的复制一些相关的信息,然后进行下一步信息的填写。前端这里需要做一个剪贴板方便用户体验。想直接参考 react 使用的可以看 使用react和typescript改写和优化一下 大概设计如下,有多条信息,然后用户可以点击右边的复制 icon 进行快捷的复制。 怎么使用JavaScr
西南_张家辉
2022/09/16
9020
【译】JavaScript实现文字剪贴板&amp;React版本
Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)
https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
Zero-Zhang
2020/12/16
1.1K0
Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)
提高效率 – 快速复制内容 – 纯HTML
本文用于快速复制HTML内容body{font-family:Arial,sans-serif;padding:20px;line-height:1.6;position:relative}table{width:100%;border-collapse:collapse}th,td{border:1px solid #ddd;text-align:left;padding:8px}th{background-color:#f2f2f2}tr:nth-child(even){background-color:#f9f9f9}#copyAlert{display:none;position:fixed;bottom:20px;right:20px;background-color:#4caf50;color:#fff;padding:10px;border-radius:5px;z-index:1000;box-shadow:0 2px 4px rgba(0,0,0,.2)}.test{border:1px solid #ddd;padding:10px;cursor:pointer}
收心
2024/10/14
1340
js实现一键复制
function clickBut(id){ // 获取要复制的内容 var value=document.getElementById(id).innerText; // 创建临时编辑控件,将内容写入临时dom节点 var temDom = document.createElement(‘input’); temDom.setAttribute(‘value’, value); // 临时控件加入到body下 document.body.appendChild(temDom); // 选择临时dom对象 temDom.select(); // 执行浏览器复制命令,将从选择的对象里复制内容 document.execCommand(“Copy”); temDom.style.display=’none’; alert(‘复制成功’); // 删除临时控件 document.body.removeChild(temDom); }
超级小可爱
2023/02/20
1.3K0
js 常用技巧
复选框 //判断checkbox 是否选中 $("#id").is(":checked");//选中,返回true,没选中,返回false //设置checkbox为选中状态 $("#id").prop("checked",true); //设置checkbox为不选中状态 $("#id").prop("checked",false); //设置select的选中效果 $("#selectDianzhang").find("option[value='"+userId+"']
用户5927264
2019/08/01
1.4K0
原生 JS 实现复制功能
<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; }
lonelydawn
2021/10/19
8.2K0
Green主题(绿色元素为主)
这些样式可以使用在前面提到的 jаvascript 脚本中的相关元素上,以实现更好的外观和交互效果。
Dabenshi
2023/08/24
3210
Chrome 插件编写-用几行js代码实现写入剪贴板功能
我们的原理是,创建一个input元素,将要写入的内容放入input里,然后选择input,再调用浏览器的复制命令,将input里的内容复制,最后隐藏input。
小蓝枣
2020/09/23
2.7K0
造一个 copy-to-clipboard 轮子
用 JS 来复制文本在网页应用里十分常见,比如 github 里复制 remote 地址的功能:
写代码的海怪
2022/03/29
9830
造一个 copy-to-clipboard 轮子
使用原生 JS 复制文本兼容移动端 iOS & android
首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本。
叙帝利
2019/05/25
9.2K1
「译」利用 JavaScript 复制文本到剪贴板
一个小小的诀窍。实现主题的复制代码功能时,思路刚好和这篇文章差不多,不过这篇文章的代码要更加合理。
Chor
2019/11/07
1.8K0
JavaScript 中的复制粘贴操作
在日常业务开发,比如复制后增加版权信息,点击复制,等场景中需要进行复制粘贴的操作,以下是几种实现方案。
FEWY
2021/09/08
2.5K0
相关推荐
JavaScript操作剪贴板
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验