js自动复制,网页一键复制

js自动复制,网页一键复制,JS实现一键复制

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

留言与评论(共有 条评论)
   
验证码: