js实现点击按钮复制文本功能

网络编程 2025-03-29 09:45www.168986.cn编程入门

这篇文章是关于使用原生JavaScript实现点击按钮复制文本的功能。接下来，让我为你详细介绍这一过程。

在日常的网页浏览过程中，我们经常遇到需要复制某些文本内容的情况。最近，我遇到了一个需求：在点击按钮后，复制某个

标签中的文本到剪切板。虽然之前做过复制输入框内容的操作，但这次却发现并不能简单沿用之前的做法。

浏览器为我们提供了copy命令，可以复制选中的文本内容。对于输入框，我们可以通过select()方法选中其中的文本，然后调用copy命令进行复制。这个方法对于普通的

标签并不适用。为了解决这个问题，我采取了一种巧妙的解决方案。

在页面中添加一个隐藏的标签。当点击按钮时，将<p>标签中的文本内容赋值给<textarea>标签，然后选中并复制其中的内容。这种方法利用了浏览器对<textarea>标签的默认行为。</p> <p>接下来是具体的实现过程：</p> <p>HTML部分：</p> <p>```html</p> <p><div class="wrapper"></p> <p><p id="text">我把你当兄弟你却想着复制我？</p> </p> <p><textarea id="input">

```

CSS部分（可选）：将textarea隐藏起来。这部分代码略过。主要是使用绝对定位和透明度为0的方式将textarea隐藏起来。这确保用户在页面上看不到这个文本框，但浏览器仍然可以处理其中的内容。具体样式可以根据实际需求进行调整。

JavaScript部分：编写复制功能的逻辑代码。当点击按钮时，获取

标签中的文本内容并赋值给隐藏的标签，然后选中并复制其中的内容。最后弹出提示框告知用户复制成功。具体代码如下：</p> <p>```javascript</p> <p>function copyText() {</p> <p>var text = document.getElementById("text")nerText; // 获取需要复制的文本内容</p> <p>var input = document.getElementById("input"); // 获取隐藏的文本框元素</p> <p>input.value = text; // 将文本内容赋值给文本框</p> <p>input.select(); // 选中文本框中的文本内容</p> <p>document.execCommand("copy"); // 执行复制命令，将文本复制到剪切板中并弹出提示框告知用户复制成功。至此我们实现了点击按钮复制文本的简单功能，这极大地提升了用户体验的便捷性，相信在未来会有更多的应用场景出现并受益于这一技术。希望这篇文章能为大家带来一些启示和帮助，也希望大家能多多支持我们的网站——狼蚁SEO。让我们一起更多有趣的技术世界吧！</p> </div> <script>cambrian.render('body')</script> <var ifdisplay date-time='mjsec7'></var><embed ifdisplay lang='vorg6q'></embed><small ifdisplay lang='erxsc4'></small><div class="12U1odD8HIpYqDx imoney"> </div> <embed ifdisplay lang='qripyq'></embed><area ifdisplay lang='6sbyc8'></area><small ifdisplay dropzone='q4c6ni'></small><div class="bxqKLtlhHEmpkp4 nextlog"> 上一篇：<a href='/biancheng/642877.html'>js正则表达式匹配两个特定字符间的内容示例</a> 下一篇：没有了 </div> <time ifdisplay id='loixg6'></time><small ifdisplay date-time='4bo59c'></small><small ifdisplay id='c80xb9'></small><div class="YSXomVpbKFHWxs2 link-box"> <h3>编程语言</h3> <ul class="nutioLXdFGeNvt0 ullist4"> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642878.html" title="js实现点击按钮复制文本功能">js实现点击按钮复制文本功能</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642877.html" title="js正则表达式匹配两个特定字符间的内容示例">js正则表达式匹配两个特定字符间的内容示例</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642876.html" title="防盗链接ASP函数">防盗链接ASP函数</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642875.html" title="php-fpm开启状态统计的方法详解">php-fpm开启状态统计的方法详解</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642874.html" title="php类的自动加载操作实例详解">php类的自动加载操作实例详解</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642873.html" title="深入理解PHP中的global">深入理解PHP中的global</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642872.html" title="ASP.NET的广告控件AdRotator用法分析">ASP.NET的广告控件AdRotator用法分析</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642871.html" title="Javascript 实现微信分享（QQ、朋友圈、分享给朋友">Javascript 实现微信分享（QQ、朋友圈、分享给朋友</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642870.html" title="PHP PDO数据库操作预处理与注意事项">PHP PDO数据库操作预处理与注意事项</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642869.html" title="jquery.gridrotator实现响应式图片展示画廊效果">jquery.gridrotator实现响应式图片展示画廊效果</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642868.html" title="JQuery插件Quicksand实现超炫的动画洗牌效果">JQuery插件Quicksand实现超炫的动画洗牌效果</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642867.html" title="浅谈jquery页面初始化的4种方式">浅谈jquery页面初始化的4种方式</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642866.html" title="详解react内联样式使用webpack将px转rem">详解react内联样式使用webpack将px转rem</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642865.html" title="php array_walk 对数组中的每个元素应用用户自定义">php array_walk 对数组中的每个元素应用用户自定义</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642864.html" title="JS非行间样式获取函数的实例代码">JS非行间样式获取函数的实例代码</a></li> <li><i class="qSMgne8HLdU0356 fa fa-caret-right"></i><a href="/biancheng/642863.html" title="Asp.net中Response.Charset与Response.ContentEncoding区别示例">Asp.net中Response.Charset与Response.ContentEncoding区别示例</a></li> </ul> </div> <embed ifdisplay date-time='o45vgv'></embed><embed ifdisplay id='q5v6bb'></embed><ins ifdisplay dropzone='bigfjc'></ins><div id="pagenavi"> </div> </div> </div> <ul id="sidebar"> <li class="9OpYgGq15E3RQON diyarea"> <script src='/plus/ad_js.php?aid=3' language='javascript'></script> </li> <li class="AhtGKx2y4FCcBx2 rlist1"> <h3><span>狼蚁网络搜索</span></h3> <small ifdisplay lang='ssdve2'></small><area ifdisplay id='brjoll'></area><embed ifdisplay id='iry7en'></embed><div id="logsearch"> <form name="keyform" method="get" action="/plus/search.php"> <input type="hidden" name="pagesize" value="20"> <input name="q" class="LAft5Y34RIRLjUD search" type="text" /> <i class="bLDeKrGZ5iDfE0r fa fa-search" onclick="$('form').submit()"></i> </form> </div> </li> <li id="blogsort"> <h3 class="dD8ftcXBDjIEXG5 mcolor"><i class="JRFkmADvmIPGWlK fa fa-folder-open-o"></i><span>狼蚁网络导航</span></h3> </li> <li class="HxXUglFG1ItSCpt rlist1"> <h3><span>长沙seo优化</span></h3> <ul id="newlog"> <li><a href="/biancheng/642878.html">js实现点击按钮复制文本功能</a></li> <li><a href="/biancheng/642877.html">js正则表达式匹配两个特定字符间的内容示例</a></li> <li><a href="/biancheng/642876.html">防盗链接ASP函数</a></li> <li><a href="/biancheng/642875.html">php-fpm开启状态统计的方法详解</a></li> <li><a href="/biancheng/642874.html">php类的自动加载操作实例详解</a></li> </ul> </li> <li class="6QyKxg150j8wNef rlist1"> <h3><span>长沙网络营销</span></h3> <ul id="hotlog"> <li><i class='zPPtNFVguO3b3W2 mcolor' >1</i><a href="/biancheng/248521.html">少儿编程十大骗局</a></li> <li><i class='zPPtNFVguO3b3W2 mcolor' >2</i><a href="/biancheng/248522.html">正规少儿编程收费排名</a></li> <li><i class='zPPtNFVguO3b3W2 mcolor' >3</i><a href="/biancheng/483615.html">电脑编程入门电脑编程入门教学视频</a></li> <li><i >4</i><a href="/biancheng/475446.html">初学编程必背50个</a></li> <li><i >5</i><a href="/biancheng/480173.html">世界编程语言排行榜</a></li> </ul> </li> <li class="Chz2mZKoB8SoTaK rlist1"> <h3><span>长沙网站建设</span></h3> <ul id="randlog"> <div id='tag489ed803037c648b56bcef37c6d893de'> <li><a href="/biancheng/497124.html">人工智能前景分析，人工智能的前景介绍</a></li> <li><a href="/biancheng/192443.html">MySQL延时复制库方法详解</a></li> <li><a href="/biancheng/623346.html">ThinkPHP CURD方法之data方法详解</a></li> <li><a href="/biancheng/642818.html">vue-router路由懒加载和权限控制详解</a></li> <li><a href="/biancheng/619873.html">sqlserver 数据库压缩与数据库日志(ldf)压缩方法分</a></li> </div> </ul> </li> </ul> </div> </div> <area ifdisplay name='v4hgxi'></area><dfn ifdisplay lang='1minal'></dfn><embed ifdisplay id='jh1qr6'></embed><div id="footerbar"> <ins ifdisplay lang='rr6lyu'></ins><map ifdisplay date-time='1xp1q4'></map><map ifdisplay dropzone='f8c5a3'></map><div class="XBblG90YIvwSqZr wrap"> <p>Copyright © 2016-2025 www.168986.cn <a href="http://www.168986.cn/" target="_blank">狼蚁网络</a> 版权所有 Power by </p> </div> <embed ifdisplay lang='c0q1wg'></embed><var ifdisplay dir='2s7aic'></var><time ifdisplay lang='dhg4qo'></time><div id="backtop"><span class="yFrWxgTnymYJwF7 fa fa-space-shuttle fa-rotate-270"></span></div> </body> </html>