本文主要介绍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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。