本文主要介绍js通过点击按钮来复制文本。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
原生js实现点击按钮复制文本供参考。具体情况如下
最近，我遇到了一个需要点击按钮并将聊天记录的文本复制到剪贴板的问题
一、原理分析
浏览器提供复制命令，可以复制选中的内容。
document.execCommand('copy ')
如果是输入框，可以通过select()方法选择输入框中的文本，然后调用copy命令将文本复制到剪贴板。
但是，select()方法仅对和有效，对无效。
我最后的解决方案是在页面上添加一个，然后隐藏它。单击按钮时，将的值更改为的内部文本，然后复制的内容。
二、代码实现
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
脚本类型='文本/javascript '
函数copyText() {
var text=document . getelementbyid(' text ')。innerText
var input=document . getelementbyid(' input ')；
input.value=文本；//修改文本框的内容
input . select()；//选择文本
document . exec command(' copy ')；//执行浏览器复制命令
Alert(“复制成功”)；
}
//或者
函数copyText(value) {
//创建用于复制的元素
var aux=document . createelement(' input ')；
//设置元素内容
aux.setAttribute('value '，值)；
//将元素插入要调用的页面
document . body . appendchild(aux)；
//复制内容
aux . select()；
//将内容复制到剪贴板
document . exec command(' copy ')；
//删除创建的元素
document . body . remove child(aux)；
//提示
Alert('复制内容成功：'辅助值')；
}
/脚本
三、一键复制
分享一个自己工作中使用的一键复制方法。
/**
*一键粘贴
* @ param { String } id[需要粘贴的内容]
* @ param { String } attr[需要复制的属性，默认为innerText。它的主要目的是在标签上分配一个href链接]
*
*范围选择
*
* 1.创建范围
* 2.将内容放入范围内
* 3.将范围放入选择中
*
*注意：参数attr不能是自定义属性。
*注意：用户选择：无的元素无效。
*注意：当id为假且attr不为空时，将直接复制attr的内容。
*/
副本(id，attr) {
设target=null
如果(属性){
target=document . createelement(' div ')；
target.id=' tempTarget
target . style . opacity=“0”；
如果(id) {
let curNode=document . query selector(' # ' id)；
target . innertext=curNode[attr]；
}否则{
target.innerText=attr
}
document . body . appendchild(target)；
}否则{
target=document . query selector(' # ' id)；
}
尝试{
let range=document . create range()；
range . select node(target)；
window.getSelection()。removeAllRanges()；
window.getSelection()。addRange(范围)；
document . exec command(' copy ')；
window.getSelection()。removeAllRanges()；
Console.log(“复制成功”)
} catch (e) {
Console.log(“复制失败”)
}
如果(属性){
//删除临时目标
target . parent element . remove child(target)；
}
}
达到效果：
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。