看JavaScript如何实现文本复制

先看下最终效果:

原理分析:

该功能主要是利用浏览器提供的copy命令,可以复制选中的内容。

如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板。但select只对input和textarea有效,对于p标签无能为力。

最终的实现方法是:增加一个隐藏的textarea(透明度为0,这里不能用hidden,否则无法获取到内容),点击复制的时候将p标签的innerText复制给textarea,在通过textarea的select()方法选中内容,执行copy命令。

大咖的话:

最近有很多想学习编程的朋友问我有没有什么好的前端/html5javascript资料!因为最近今年我都在认真搜集有价值的web前端资料,技术资料,只为帮助那些想学习前端而不知道从哪开始的朋友。

HTML代码结构:

JS代码:

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180531A135PG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券