源生JS实现点击复制功能
程序员文章站
2022-07-01 15:51:17
之前在工作中,有位同事问过我一个问题,JS如何实现点击复制功能。给他解决后现在来总结归纳一下,顺便做个笔记。 PS:此乃本人第一篇博客(跟着同事大佬学习),涉及知识尚浅,如有任何意见和建议请告知于我。下面开始正文:
之前在工作中,有位同事问过我一个问题,js如何实现点击复制功能。给他解决后现在来总结归纳一下,顺便做个笔记。
ps:此乃本人第一篇博客(跟着同事大佬学习),涉及知识尚浅,如有任何意见和建议请告知于我。下面开始正文:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>源生js实现点击复制功能</title> </head> <body> <button onclick="clkcopy()">点击复制</button> <input type="text" id="text" value="123"> <script> function clkcopy() { var text = document.getelementbyid("text"); text.select(); document.execcommand('copy'); alert("复制成功!"); } </script> </body> </html>
通过dom元素的select()方法可以选择到<input>和<textarea>中的文字,再调用document.execcommand('copy');实现复制功能。
那么,如果我们想要复制<div>中的内容,可以用上述方法嘛?经测试,使用上述方法点击复制<div>中的内容会报错
那么我们可以使用如下方法来实现此功能:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>源生js实现点击复制功能</title> </head> <body> <button onclick="clkcopydiv()">点击复制</button> <div id="div">123</div> <script> function clkcopydiv() { var text = document.getelementbyid("div"); var selection = window.getselection(); var range = document.createrange(); range.selectnodecontents(text); selection.removeallranges(); selection.addrange(range); document.execcommand('copy'); alert("复制成功!"); } </script> </body> </html>