本文主要介绍native js通过点击按钮复制文本的相关代码。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

最近遇到一个需求，需要点击按钮将P标签中的文字复制到剪贴板。

我以前复制过输入框的内容。我以为差不多，结果根本不行。

尝试了各种方法，最后做了个障眼法，达到了以下效果。

一、原理分析

浏览器提供复制命令，可以复制选中的内容。

document.execCommand('copy ')

如果是输入框，可以通过select() 方法选择输入框中的文本，然后调用copy命令将文本复制到剪贴板。

但是select()方法只对input和textarea有效，对p无效。

我最后的解决方案是在页面上添加一个文本区域，然后隐藏它。

点击按钮的时候，先把 textarea 的 value 改为 p 的 innerText，然后复制 textarea 中的内容

二、代码实现

HTML部分

style type='text/css '。包装{位置：相对；}

#input {position:绝对值；top:0；左：0；不透明度：0；z指数：-10；}

/风格

div class='wrapper '

P=' text '我把你当兄弟，你却要抄袭我？/p

textarea id=' input ' This behind This/textarea

button onclick=' copy text()' copy/button

/div

JS零件

脚本类型='文本/javascript '

函数copyText() {

var text=document . getelementbyid(' text ')。innerText

var input=document . getelementbyid(' input ')；

input.value=文本；//修改文本框的内容

input . select()；//选择文本

document . exec command(' copy ')；//执行浏览器复制命令

Alert(“复制成功”)；

}

/脚本

亲爱的，火狐48.0，Chrome 60.0，IE 8都可以。

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。