如何使用HTML5的复制到剪贴板API

发布时间：2024-01-05 栏目：建站知识浏览：分类：js教程 HTML5教程

HTML5复制clipboard API允许你在网页中轻松实现复制文本到剪贴板的功能。首先，创建一个``元素，将要复制的文本放入其中。然后，通过调用`navigator.clipboard.writeText()`方法，将文本写入剪贴板。在调用此方法时，需要传递一个包含要复制文本的`TextRange`对象。最后，监听`clipboard-success`和`clipboard-error`事件，以处理复制成功或失败的情况。</p><p>HTML5更新了clipboard API，可以直接复制文本了，以后不在需要引入第三方插件了。</p><p>分享一个官方实例，复制页面中元素的信息到剪切板。代码如下：<br/></p><pre class="brush:js;toolbar:false">navigator.clipboard.readText().then(clipText=>document.querySelector(".cliptext").innerText=clipText);</pre><p>再来一个复制网址到剪切板的代码，代码如下：</p><pre class="brush:js;toolbar:false;">letdata=window.location.href//拿到目前的网址信息navigator.clipboard.writeText(data).then(data=>uni.showToast(//封装的toast成功回调title:'复制成功，快去分享吧！',icon:'none'))</pre><p>完成需求。<br/></p>  <div class="pagelist"> </div>  <div class="bianji"> </div> </div> <div class="share"> <div class="context clearfix"> <ul> <li class="fl"><a href='/teach/ercikaifa/25289.html'>PHP实现获取迅雷/爱奇艺/优酷VIP会员帐号API接口源码</a></li> <li class="fr"><a href='/teach/ercikaifa/25291.html'>Explain的含义和功能是什么？</a></li> </ul> </div> </div> </div>  <div class="relatenews"> <div class="tit12"> <h3>相关文章</h3></div> <div class="cont clearfix"> <ul class="list2"> <div class="col-lg-4 post"><li><a href="/teach/ercikaifa/25034.html" title="使用Python检测U盘并复制所需文件">使用Python检测U盘并复制所需文件</a></li></div><div class="col-lg-4 post"><li><a href="/teach/jiqiao/23142.html" title="禁用JavaScript破解网站禁止复制内容">禁用JavaScript破解网站禁止复制内容</a></li></div><div class="col-lg-4 post"><li><a href="/teach/jiqiao/23140.html" title="HTML5视频自动循环播放方法">HTML5视频自动循环播放方法</a></li></div><div class="col-lg-4 post"><li><a href="/teach/jiqiao/23060.html" title="只需轻轻一点快速破解所有网站限制复制功能">只需轻轻一点快速破解所有网站限制复制功能</a></li></div><div class="col-lg-4 post"><li><a href="/teach/jiqiao/23056.html" title="网页禁止复制或复制自带推广信息解决办法">网页禁止复制或复制自带推广信息解决办法</a></li></div><div class="col-lg-4 post"><li><a href="/teach/jiqiao/23037.html" title="破解csdn限制复制的功能方法">破解csdn限制复制的功能方法</a></li></div><div class="col-lg-4 post"><li><a href="/teach/jiqiao/23038.html" title="HTML5视频播放video标签使用方法">HTML5视频播放video标签使用方法</a></li></div><div class="col-lg-4 post"><li><a href="/teach/jiqiao/23039.html" title="CSDN复制限制破解方法合集分享">CSDN复制限制破解方法合集分享</a></li></div> </ul> </div> </div>  <div id="plq"class="mt2"> <div class="plqt"> <span></span>评论 </div> </div> </div> </div>  <div class="sidebox"> <div class="tjmuban item"> <div class="tit7"> <h3>推荐教程</h3> </div></div> <div class="con"> <ul class="pic3txt"> <li> <a class="pic" href="/sitemb/wordpress/30382.html"> <img alt="自适应WordPress站长素材资源下载主题模板-RiPro V4.0" src="/d/copic/lxzjssyrbs2.jpg"/></a> <span><a href="/sitemb/wordpress/30382.html" title="自适应WordPress站长素材资源下载主题模板-RiPro V4.0">自适应WordPress站长素材资源下载主题模板-RiPro V4.0</a></span> </li> <li> <a class="pic" href="/sitemb/wordpress/30381.html"> <img alt="电脑端Muiteer2.3.7作品图片展示WordPress主题模板" src="/d/copic/odjh3xcywoy.jpg"/></a> <span><a href="/sitemb/wordpress/30381.html" title="电脑端Muiteer2.3.7作品图片展示WordPress主题模板">电脑端Muiteer2.3.7作品图片展示WordPress主题模板</a></span> </li> <li> <a class="pic" href="/sitemb/wordpress/30380.html"> <img alt="自适应wordpress自适应LensNews主题网站模板" src="/d/copic/rriipixyrfu.jpg"/></a> <span><a href="/sitemb/wordpress/30380.html" title="自适应wordpress自适应LensNews主题网站模板">自适应wordpress自适应LensNews主题网站模板</a></span> </li> <li> <a class="pic" href="/sitemb/wordpress/30378.html"> <img alt="电脑端iDownsV1.8.4站长素材下载类WordPress主题模板" src="/d/copic/xy3h4owfsdh.jpg"/></a> <span><a href="/sitemb/wordpress/30378.html" title="电脑端iDownsV1.8.4站长素材下载类WordPress主题模板">电脑端iDownsV1.8.4站长素材下载类WordPress主题模板</a></span> </li> <li> <a class="pic" href="/sitemb/wordpress/30377.html"> <img alt="自适应iFalse轻量自适应WordPress开源主题模板" src="/d/copic/eicxd4q5eki.jpg"/></a> <span><a href="/sitemb/wordpress/30377.html" title="自适应iFalse轻量自适应WordPress开源主题模板">自适应iFalse轻量自适应WordPress开源主题模板</a></span> </li> <li> <a class="pic" href="/sitemb/ecshop/30375.html"> <img alt="电脑端ECShop码支付插件" src="/d/copic/whrndsqvrjw.jpg"/></a> <span><a href="/sitemb/ecshop/30375.html" title="电脑端ECShop码支付插件">电脑端ECShop码支付插件</a></span> </li> </ul> </div> <script type="text/javascript"> $(function() { $(".list12>li>span:lt(3)").css({ "background-color": "#17B181" }) }); </script> <div style="clear:both;height:5px;"></div> <div class="zmjc item dotline"> <div class="tit11"> <h3>最新文章</h3></div> <div class="cont clearfix"> <ul class="list12"> <li><span>1</span> <a target="_blank"href="/teach/ercikaifa/25544.html">如何禁止WordPress用户访问sitemap并仅允许搜索引擎蜘蛛访问</a></li> <li><span>2</span> <a target="_blank"href="/teach/ercikaifa/25543.html">使用PHP检测网址是否可正常访问</a></li> <li><span>3</span> <a target="_blank"href="/teach/ercikaifa/25542.html">教程：如何修改苹果CMS的默认首页</a></li> <li><span>4</span> <a target="_blank"href="/teach/ercikaifa/25541.html">六种目前可行的微信解封方法</a></li> <li><span>5</span> <a target="_blank"href="/teach/ercikaifa/25540.html">图文教程：苹果CMSv10批量删除视频数据的方法</a></li> <li><span>6</span> <a target="_blank"href="/teach/ercikaifa/25539.html">获取jQuery中input元素的type值</a></li> <li><span>7</span> <a target="_blank"href="/teach/ercikaifa/25538.html">分享JavaScript获取字符长度的函数</a></li> <li><span>8</span> <a target="_blank"href="/teach/ercikaifa/25537.html">制作圆形文字图标效果的CSS开发指南</a></li> <li><span>9</span> <a target="_blank"href="/teach/ercikaifa/25536.html">解决帝国cms打开转换表文件失败的方法</a></li> <li><span>10</span> <a target="_blank"href="/teach/ercikaifa/25535.html">教程：如何在苹果CMS中添加年份筛选功能</a></li> </ul> </div> </div> <div id="fixed"class="ad item">  </div> </div> </div>  </div> <div class="listleft"> <div class="lanmu-content"> <dl class="lanmu-list"> <dt>建站知识</dt> <dd><a href='/teach/ercikaifa/'title='建站知识'>建站知识</a></dd> <dd><a href='/teach/jiqiao/'title='使用技巧'>使用技巧</a></dd> <dd><a href='/teach/anzhuang/'title='调试安装'>调试安装</a></dd> <dd><a href='/teach/yunying/'title='运营推广'>运营推广</a></dd> </dl> <a class="listmore"style="display:none;"href="javascript:;">查看更多↓</a> </div> </div> <script language="javascript"type="text/javascript">$(function(){var LanMu=$(".lanmu-list");var lanMuSun=LanMu.children("dd");if((lanMuSun.size())>4){LanMu.children("dd:gt(3)").hide();$(".listmore").show()}$(".listmore").bind("click",function(){if(!$(".listmore").hasClass("ListMoreOn")){$(".listmore").addClass("ListMoreOn");LanMu.children("dd:gt(3)").slideDown();$(".listmore").html("u6298u53e0u680fu76ee u2191")}else{$(".listmore").removeClass("ListMoreOn");LanMu.children("dd:gt(3)").slideUp();$(".listmore").html("u67e5u770bu66f4u591a u2193")}})});</script>  <script language="javascript"type="text/javascript"src="/statics/js/code.js"></script> <div style="clear:both;height:20px;"> </div> <div class="footer"> <div id="foot"> <dl> <dd id="di-me"> <p> 如果涉及到您的权益问题请联系weblw2@foxmail.com </p> </dd></dl> </div></div> <div class="footer2"> <div id="foot1"> <div align="center"> <dl> <span> </span> </dl> </div> </div> </div> <div align="center">  <script type="text/javascript"src="/statics/js/dropdown.js"></script> </div> <ul id="dropmenu1" class="dropMenu"> <li><a href="/erkai/">帝国cms插件</a></li> <li><a href="/Daima/">特效代码</a></li> <li><a href="/code/gongsi/">公司网站源码</a></li> <li><a href="/code/jp/">精品源码</a></li> </ul> <ul id="dropmenu2" class="dropMenu"> <li><a href="/weixin/wxxcx/">微信小程序源码</a></li> </ul> <ul id="dropmenu3" class="dropMenu"> <li><a href="/teach/yunying/">运营推广</a></li> <li><a href="/teach/anzhuang/">调试安装</a></li> <li><a href="/teach/jiqiao/">使用技巧</a></li> <li><a href="/teach/ercikaifa/">建站知识</a></li> </ul> <ul id="dropmenu4" class="dropMenu"> <li><a href="/app/">实用软件</a></li> <li><a href="/Tool/3D/">3D字体制作</a></li> <li><a href="/Tool/color/">配色表</a></li> <li><a href="/teach/gongju/">工具下载</a></li> </ul> <ul id="dropmenu18" class="dropMenu"> <li><a href="/piu/liulanqi/">浏览器插件</a></li> <li><a href="/piu/emlog/">emlog插件</a></li> <li><a href="/piu/discuz/">discuz插件</a></li> <li><a href="/piu/dede/">织梦cms插件</a></li> <li><a href="/piu/wordpress/">wordpress插件</a></li> <li><a href="/piu/diguo/">帝国cms插件</a></li> </ul> <ul id="dropmenu25" class="dropMenu"> <li><a href="/sitemb/htmlmb/">html模板</a></li> <li><a href="/sitemb/psd/">psd模板</a></li> <li><a href="/sitemb/xcx/">小程序模板</a></li> <li><a href="/sitemb/Typecho/">Typecho模板</a></li> <li><a href="/sitemb/PbootCMS/">PbootCMS模板</a></li> <li><a href="/sitemb/zblog/">zblog模板</a></li> <li><a href="/sitemb/emlog/">emlog模板</a></li> <li><a href="/sitemb/feifei/">飞飞cms模板</a></li> <li><a href="/sitemb/haiyang/">海洋cms模板</a></li> <li><a href="/sitemb/pinguo/">苹果cms模板</a></li> <li><a href="/sitemb/wordpress/">wordpress模板</a></li> </ul> <script type="text/javascript">cssdropdown.startchrome("navMenu")</script> <script type="text/javascript">jQuery(document).ready(function(){var topmenu=jQuery("#navMenu");var topmenu_top=topmenu.offset().top;reset_topmenu_top(topmenu,topmenu_top);jQuery(window).scroll(function(){reset_topmenu_top(topmenu,topmenu_top);});});function reset_topmenu_top(topmenu,topmenu_top){var document_scroll_top=jQuery(document).scrollTop();if(document_scroll_top>topmenu_top){topmenu.css({'position':'fixed','top':'0px'});}if(document_scroll_top<=topmenu_top){topmenu.attr('style',{'top':topmenu_top+'px'});}}</script>   <script language="javascript"type="text/javascript"src="/statics/js/top.js"></script> <div id="fix-opt"> <a style="visibility: hidden;"href="#top"class="go-top"target="_self"id="totop_btn"></a> </div> <script language="javascript"type="text/javascript"src="/statics/js/top1.js"></script>   </body> </html>