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跨Iframe选择实现代码
Aug 19 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
修改npm全局安装模式的路径方法
May 15 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 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
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
javascript中的隐式调用
2018/02/10 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Random 在 Python 中的使用方法
2018/08/09 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python字符串及文本模式方法详解
2020/09/10 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
用python批量下载apk
2020/12/29 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
开业庆典邀请函
2014/01/08 职场文书
教师节演讲稿
2014/05/06 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2014年实习生工作总结
2014/11/27 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
2016年母亲节寄语
2015/12/04 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技