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

　　

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

　　

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

　　

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

　　

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

　　

<强>一、原理分析

　　

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

　　 　　 　　document.execCommand(“复制”) 　　 　　

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

　　

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

　　

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

　　

<强>点击按钮的时候,先把& lt; textarea>的值改为& lt; p>的innerText,实现然后复制& lt; textarea>中的内容,

　　

<强>二、代码实现

　　

HTML部分 　　 　　 　　& lt;风格类型=" text/css "比; 　　.wrapper{:相对;} 　　#输入{:绝对;:0;左:0;不透明度:0;z - index: -10;} 　　& lt;/style> 　　 　　& lt; div类=鞍捌鳌北? 　　& lt; p id=拔谋尽钡脑谖野涯愕毙值苣闳聪胱鸥粗莆? & lt;/p> 　　& lt; textarea id="输入"在这是幕后黑手& lt;/textarea> 　　& lt; button> copy 　　& lt;/div> 　　 　　之前 　　 　　

JS部分 　　 　　 　　& lt;脚本type=" text/javascript祝辞 　　函数copyText () { 　　var文本=. getelementbyid(“文本”).innerText; 　　var输入=. getelementbyid(“输入”); 　　输入。值=https://www.yisu.com/zixun/text;//修改文本框的内容 　　input.select ();//选中文本 　　document.execCommand(“复制”);//执行浏览器复制命令 　　alert("复制成功”); 　　} 　　& lt;/script> 　　 　　 　　之前 　　 　　

亲测,火狐48.0,Chrome 60.0, IE 8都能用

　　

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

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