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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
js解决movebox移动问题
Mar 29 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
vue 防止页面加载时看到花括号的解决操作
Nov 09 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
了解重排与重绘
2019/05/29 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
Python Requests安装与简单运用
2016/04/07 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
利用aardio给python编写图形界面
2017/08/21 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
python 编写简单网页服务器的实例
2018/06/01 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
法院实习人员自我鉴定
2013/09/26 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
简短证婚人证婚词
2014/01/09 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
业绩考核岗位职责
2014/02/01 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
敬老模范事迹
2014/05/21 职场文书
活动宣传策划方案
2014/05/23 职场文书
元旦趣味活动方案
2014/08/22 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
校本培训个人总结
2015/02/28 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
Python一行代码实现自动发邮件功能
2021/05/30 Python
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers