专注前端行业精选
js如何实现点击复制功能,js点击复制文本
作者:鹏仔先生日期:2020-07-13 14:13:11浏览:3462分类:JavaScript
Hello,大家好,前段时间做舔狗日记小程序,需要一键复制,看了下文档,小程序自带复制功能,那么网页js如何实现复制功能呢?
首先,我查了下,貌似可以实现对input和textarea等文本输入框可以实现选中复制,针对div,p等标签不可以,那么我们需要新建一个文本框标签,不能给display:none; 我们需要怼他进行一个定位,让透明看不见找不到,点击复制,将需要复制的内容赋值给文本框,接着对文本框进行全选,在进行复制操作即可,代码如下:
<p id="content">前端共享博客-专注前端行业精选- sharedbk.com</p> <textarea id="text" style="position: fixed;top: 10000px;left: 10000px;opacity: 0;"></textarea> <button id="CopyBtn">复制</button>
<script> var content = document.getElementById("content").innerText; var text = document.getElementById("text"); var CopyBtn = document.getElementById("CopyBtn"); CopyBtn.onclick = function(){ // 将需要复制的内容赋值给文本框 text.value = content; // 选中文本框的内容 text.select(); // 对选中的内容进行复制 document.execCommand("copy"); } </script>
猜你还喜欢
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载(以及下载跨域问题分析)
- 07-08 uniapp调用地图,进行位置查询,标记定位
- 11-05 js截取字符串前几位或者截取字符串后几位
- 10-25 js替换字符串某个字符,js修改字符串中指定字符
- 09-26 vue给单独组建的body添加类名
- 08-12 elemtnui 表格如何修改某行文字颜色
- 08-03 vue中调用百度地图 获取经纬度
- 07-09 uniapp小程序实现录音 uniapp小程序长按录音 点击播放等功能(CSS实现语音音阶动画效果)
- 07-09 uniapp小程序实现点击拨打电话功能
- 07-09 js字符串转对象 js对象转字符串 js字符串与对象互转
- 06-10 js获取一个文件名的后缀格式
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
已有2位网友发表了看法:
null 评论于 [2020-07-21 13:32:13] 回复
好久没来,网页风格变了哦
鹏仔先生 评论于 [2020-07-23 00:57:33] 回复
哈哈,换了一个程序,大大的改动了。