js实现点击按钮复制文本功能


Posted in Javascript onJuly 20, 2020

最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板

之前做过复制输入框的内容,原以为差不多,结果发现根本行不通

尝试了各种办法,最后使了个障眼法,实现了下面的效果

js实现点击按钮复制文本功能

一、原理分析

浏览器提供了 copy 命令 ,可以复制选中的内容

document.execCommand("copy")

如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板

但是 select() 方法只对 <input> 和 <textarea> 有效,对于 <p> 就不好使

最后我的解决方案是,在页面中添加一个 <textarea>,然后把它隐藏掉

点击按钮的时候,先把 <textarea> 的 value 改为 <p> 的 innerText,然后复制 <textarea> 中的内容 

二、代码实现

HTML 部分

<style type="text/css">
 .wrapper {position: relative;}
 #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>

<div class="wrapper">
 <p id="text">我把你当兄弟你却想着复制我?</p>
 <textarea id="input">这是幕后黑手</textarea>
 <button onclick="copyText()">copy</button>
</div>

JS 部分

<script type="text/javascript">
 function copyText() {
  var text = document.getElementById("text").innerText;
  var input = document.getElementById("input");
  input.value = text; // 修改文本框的内容
  input.select(); // 选中文本
  document.execCommand("copy"); // 执行浏览器复制命令
  alert("复制成功");
 }
 </script>

亲测,Firefox 48.0,Chrome 60.0,IE 8 都能用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 #Javascript
React中的render何时执行过程
Apr 13 #Javascript
全站最详细的Vuex教程
Apr 13 #Javascript
vue的常用组件操作方法应用分析
Apr 13 #Javascript
简单的vuex 的使用案例笔记
Apr 13 #Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 #Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 #Javascript
You might like
极典R601SW收音机
2021/03/02 无线电
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP 代码规范小结
2012/03/08 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python中的装饰器用法详解
2015/01/14 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
Python递归函数实例讲解
2019/02/27 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
python SocketServer源码深入解读
2019/09/17 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
审核会计岗位职责
2013/11/08 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
如何书写授权委托书?
2019/06/25 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS