给pre添加复制按钮

最新推荐文章于 2024-08-02 04:39:13 发布

又可乐

最新推荐文章于 2024-08-02 04:39:13 发布

阅读量210

点赞数

文章标签： javascript html 前端 css html5

本文链接：https://blog.csdn.net/weixin_35755434/article/details/129518383

版权

我可以给您提供几种在HTML中为

标签添加复制按钮的方法。
    
    使用JavaScript和HTML添加按钮：<span class="hljs-tag"><<span class="hljs-name">pre</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">code</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"code"</span>></span>
 这里是要复制的文本
  <span class="hljs-tag"></<span class="hljs-name">code</span>></span>
<span class="hljs-tag"></<span class="hljs-name">pre</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"copy-button"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"copyCode()"</span>></span>复制<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript">
  <span class="hljs-keyword">function</span> <span class="hljs-title function_">copyCode</span>(<span class="hljs-params"></span>) {
 <span class="hljs-keyword">var</span> copyText = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"code"</span>);
 navigator.<span class="hljs-property">clipboard</span>.<span class="hljs-title function_">writeText</span>(copyText.<span class="hljs-property">textContent</span>).<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
   <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"复制成功！"</span>);
 }, <span class="hljs-keyword">function</span>(<span class="hljs-params">err</span>) {
   <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">"复制失败："</span>, err);
 });
  }
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<button class="copy-btn"></button>