js获取复制的内容,js点击就把内容复制出来
本文为大家带来一些关于javascript的知识，主要介绍用JS复制页面内容的三种方案的详细说明。有需要的朋友可以借鉴一下，希望能有所帮助。
【相关推荐：javascript视频教程，web前端】
现在有很多第三方插件可以实现复制功能，但是如果我们自己做，我们知道怎么做吗？
本文介绍了三种实现方案。
方式一：Async Clipboard API
使用异步剪贴板API
这种方法用起来最简单，但是兼容性不是很好，要求比较多。
示例代码：
const promise=navigator . clipboard . write text(newClipText)；注意，方法的返回值是一个承诺。并且使用该方法时，页面必须处于焦点状态，否则会报错。
方式二：Document.execCommand API
使用Document.execCommand命令
虽然这种方式的警告被废弃，不再属于web标准，但是有很多历史因素。相信浏览器会长期支持。
复制 DOM 元素内容
p id=content123456/p
button id= Copy button Copy/button复制DOM元素时，需要另外使用选择API和范围API。
developer.mozilla.org/en-US/docs/…
developer.mozilla.org/en-US/docs/…
示例代码：
const copy button=document . getelementbyid( copy button )；
const content=document . getelementbyid( content )；
copy button . addevent listener( click ，function () {
const selection=window . get selection()；
const range=document . create range()。
//设置选中的内容
range.selectNodeContents(内容)；
//清空选中的内容
selection . removeallranges()；
//添加选定的内容
selection.addRange(范围)；
document . exec command( copy )；
});在添加范围之前，需要清空选择。
这里会有一个细节问题。点击复制按钮后，复制的内容处于选中状态，有些突兀。
解决方法是在复制完成后调用selection.removeAllRanges()清除选中的内容。
考虑另一种情况，用户在复制之前选择了页面的一部分。复制后，除了清除选中的复制内容，还需要恢复用户在复制前选中的内容。
实现代码如下：
const copy button=document . getelementbyid( copy button )；
const content=document . getelementbyid( content )；
copy button . addevent listener( click ，function () {
const selection=window . get selection()；
const range=document . create range()。
//缓存用户选择的内容
常量电流范围=
selection.rangeCount===0？null:selection . getrangeat(0)；
//设置文档片段
range.selectNodeContents(内容)；
//清空选中的内容
selection . removeallranges()；
//将文档片段设置为选中的内容
selection.addRange(范围)；
尝试{
//复制到剪贴板
document . exec command( copy )；
} catch (err) {
//提示复制失败
}最后{
selection . removeallranges()；
if (currentRange) {
//恢复用户的选择
selection . add range(current range)；
}
}
});先缓存用户选择的内容，复制后再恢复。
复制 input 元素内容
您可以使用input element对象的select方法来选择内容，而无需创建范围片段来设置所选内容。
示例代码：
const copy button=document . getelementbyid( copy button )；
const input El=document . getelementbyid( input )；
copy button . addevent listener( click ，function () {
const selection=window . get selection()；
常量电流范围=
selection.rangeCount===0？null:selection . getrangeat(0)；
//选择输入内容
inputel . select()；
//复制到剪贴板
尝试{
document . exec command( copy )；
} catch (err) {
//提示复制失败
//。
}最后{
selection . removeallranges()；
if (currentRange) {
//恢复用户的选择
selection . add range(current range)；
}
}
});点击复制按钮，之前选择的内容不会被删除。
方法三：覆写 copy 事件
w3c.github.io/clipboard-a…
引用上面链接中的一段代码作为例子：
//覆盖复制到剪贴板的内容。
文档。addevent侦听器( copy ，函数(e) {
//e.clipboardData最初为空，但我们可以将其设置为
//我们要复制到剪贴板上的数据。
e。剪贴板数据。setdata( text/plain ，西炒蛋);
//这是防止当前文档选择
//正在写入剪贴板。
e。防止默认()；
});在页面复制任何内容，粘贴输出的内容都会是"西炒蛋"。
【相关推荐：javascript视频教程、网络前端】以上就是Java脚本语言复制页面内容的三种方案（总结分享)的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。