JavaScript 点击触发复制功能实例详解
更新时间：2018年11月02日 09:14:27 作者：迪迪的博客
这篇文章主要介绍了JavaScript 点击触发复制功能实例详解,需要的朋友可以参考下
摘要：
js调用复制功能使用:
document.execCommand("copy"， false);
document.execCommand()方法功能很强大，了解更多请戳：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
正文：
调用以上方法，就实现了copy功能，可是，在调用之前，你需要先选中需要复制的内容。
选中需要复制的内容可使用select()方法，然而该方法只能选中input或者textarea标签里的内容。
因此，如果你想实现点击一个按钮，就复制一段话的功能
第一：如果这段话是被input或textarea标签包裹，则可以直接只用select()，
第二：如果是其他任意标签包裹的话，则需要新creat一个input标签，给该input标签赋value，然后使用select()方法，最后将该input标签remove了。
完整代码：
function copy(that){
var inp =document.createElement('input'); // create input标签
document.body.appendChild(inp) // 添加到body中
inp.value =that.textContent // 给input设置value属性为需要copy的内容
inp.select(); // 选中
document.execCommand('copy',false); // copy已经选中的内容
inp.remove(); // 删除掉这个dom
}
<p onclick="copy(this)">hello man</p>
小知识点：
1：select()使用范围；
2：删除一个dom，使用node.remove();
3：调用复制功能使用document.execCommand()方法;
参考链接：
https://stackoverflow.com/questions/45071353/javascript-copy-text-string-on-click
总结
以上所述是小编给大家介绍的JavaScript 点击触发复制功能 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文给大家分享的常用脚本有通过数组，拓展字符串拼接容易导致性能的问题、页面 视口 滚动条的位置的辅助函数、调节元素透明度的函数、获取鼠标位置的几个通用的函数、使用cssdisplay属性来切换元素可见性的一组函数、样式相关的通用函数、获取元素当前的高度和宽度。2015-03-03
WEB前端开发框架Bootstrap3 VS Foundation5
WEB前端开发框架Bootstrap3 VS Foundation5,这篇文章主要介绍了Bootstrap3与Foundation5的五大区别,感兴趣的小伙伴们可以参考一下2016-05-05
改善性能的最好方法之一是避免重复两次相同的工作。因此，只要可以缓存结果供以后使用，就可以加快程序的速度。延迟加载属性模式技术使任何属性都可以成为缓存层以提高性能。这里说到的延迟加载属性模式就是利用的访问器属性，将计算昂贵的操作推迟到需要时再使用2021-06-06
滚动至页顶，比以前的直接跳到页顶效果好很多，正的很不错2008-09-09
这篇文章主要介绍了纯js实现放大缩小拖拽功能，文中给大家提到了在开发过程中遇到的一些问题及解决方法,需要的朋友可以参考下2019-11-11
主要是通过在主页面定义一个传输数据的函数GetData(data)，然后在iframe嵌入页面中通过parent.GetData(data),这样即可在GetData实现将data进行处理即可。2013-03-03
js动态改变select选择变更option的index值示例
今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删，然后再 删除索引小的2014-07-07
这篇文章主要介绍了如何动态加载外部Javascript文件，本文举例讲解使用js加载器动态加载外部Javascript文件，感兴趣的小伙伴们可以参考一下2015-12-12
从10多年前JSON在线编辑器的早期开始，用户经常反映编辑器有时会破坏他们JSON文档中的大数字的问题，这篇文章主要介绍了为什么JSON.parse会损坏大数字，如何解决这个问题,需要的朋友可以参考下2022-10-10
执行上下文是JavaScript中非常重要的概念，它决定了代码的执行顺序和作用域链等重要信息，下面我们就来深入探讨JavaScript执行上下文的概念和工作原理吧2023-07-07
最新评论