JS点击按钮复制文本
在PC端上通过点击按钮复制对应文本的业务场景,不经常有,但是让我碰见了,也了解了下实现方法。
1、通过createElement生成一个input输入框,并将其透明度设为0,使得用户无感知;
2、将需要复制的内容赋值到输入框内,(一定要将输入框添加到页面body中)才能使用select函数选中。
3、通过document.execCommand(“copy”)执行浏览器复制命令,就能将对应文本进行复制了
function handleCopy(text) {const input = document.createElement('input')input.style.cssText = 'opacity: 0;';input.type = 'text';input.value = text; // 修改文本框的内容document.body.appendChild(input)input.select(); // 选中文本document.execCommand("copy"); // 执行浏览器复制命令this.$message({message: '复制成功',type: 'success'})
},
JS点击按钮复制文本相关推荐
- 点击按钮复制文本框内容
点击按钮复制文本框内容 复制文本框内容的方法如下: function Copy(){var e=document.getElementById("content");//对象是co ...
- vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子 点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
- JS复制文本到粘贴板,前端H5移动端点击按钮复制文本到粘贴板。
最近做手机端H5网页里面有个活动:点击按钮复制邀请码.查过一些方法,在电脑端可以复制粘贴,一放在手机上面打开网页就不能复制粘贴了. 直接进入正题 使用开源项目 clipboard.js, 官网:点击打 ...
- html 复制文本按钮,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 ...
- js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- html5点击复制文本框内容,js实现点击按钮复制文本功能
最近遇到一个需求,需要点击按钮,复制 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 ...
- 实现点击按钮复制文本(Clipboard包)
操作如下: npm install clipboard --save import Clipboard from 'clipboard'; Vue.use(VueClipboard) <temp ...
- 实现点击按钮 复制文本内容
一.原生方法 1.结构 <li><span>运单号码:</span><b id="waybill_number">{$order-& ...
- vue 适配微信浏览器 实现点击按钮复制文本 clipboard
之前写的复制功能发现用微信打开的浏览器页面不生效,所以又换了种方法实现 首先,安装 clipboard npm install clipboard --save 然后,引入 clipboard imp ...
- 利用clipboardJs 点击按钮复制文本
官网:https://clipboardjs.com/ 1. npm install clipboard --save 2. 引入 import ClipboardJS from 'clipboar ...
最新文章
- 微型计算机原理指令系统问题,微机原理复习题(指令系统).doc
- C语言编译报错:incompatible pointer type [-Wincompatible-pointer-types](传参类型不匹配)
- iOS关于RunLoop和Timer
- 在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序
- Fibonacci Sum HDU - 6755【2020 Multi-University Training Contest 1】斐波那契数列变形+二项式定理
- RK4程序c语言,matlab实现欧拉法和RK-4方法的数值计算
- 6月21日武汉见!华为nova 5正式官宣:麒麟980+40W快充
- idea 2020和2017下载
- Joseph_Circle(约瑟夫环)
- Kubernetes之配置与自定义DNS服务
- HDU1210 Eddy's 洗牌问题【递推函数+模拟】
- python合并两个数据框_python-3.x - 如何使用匹配索引合并两个数据框? - SO中文参考 - www.soinside.com...
- rss feed for testing
- queryDsl引入Mysql内置函数示例
- 热敏打印机的工作原理
- 讯飞AIUI语音初体验
- 软件测试需要学什么?测试学习大纲梳理
- RGB、CMY、HSV、HSL颜色空间
- 【AI测试】人工智能测试整体介绍——第二部分
- 日常所需 - 收藏集 - 掘金
热门文章
- 【2021-07最新可用】解决谷歌地球、Google地球、Google Earth Pro无法正常启动:启动一直转圈圈、无法链接到登录服务器 、显示黑屏地图无法加载 、软件无法启动双击图标没反应等
- 校园网网络命令拓扑命令+详解集合
- Ubuntu下使用dex2jar
- Android_JNI编程入门
- 显卡故障软件测试,显卡软硬件故障检查与排除实战
- struts2 拦截器
- 对话框ModifyStyle(0, WS_MINIMIZEBOX)最小化按钮无效的解决方法
- php流光字,《留言板寄语流光字》_留言板寄语流光字_NEWS下载网
- windows service (三)打包安装服务
- 视频教程-2020年软考网络工程师基础知识软考视频教程-软考