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 相关文章推荐
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
微信小程序实现单选功能
Oct 30 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
Python基于DES算法加密解密实例
2015/06/03 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
药学专业毕业生求职信
2013/10/20 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2015年采购员工作总结
2015/04/27 职场文书
推广普通话的宣传语
2015/07/13 职场文书
志愿者工作心得体会
2016/01/15 职场文书