jQuery 复制文本内容到剪贴板

Amazon Translator

已于 2023-02-17 17:05:47 修改

阅读量6.1k

点赞数 5

分类专栏： Jquery 文章标签： jquery javascript 前端

于 2021-04-01 11:28:01 首次发布

本文链接：https://blog.csdn.net/qq_45140694/article/details/115370108

版权

Jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>jQuery复制文本到剪贴板</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> 
 </head>
 <body>

<textarea id="copy" style="display:none;"></textarea>
 
<button id="copy-button" title="复制链接">
  <span>复制链接  </span>      
</button>
  
<script>
// 复制内容
$('#copy-button').click(function() {
  var str = "这里是我要复制的内容";
  var $temp = $('<input>');
  $('body').append($temp);
  $temp.val(str).select();
  document.execCommand('copy');
  $temp.remove();
  alert('复制成功！');
});
</script>
 </body>
</html>

这段代码在页面上创建了一个按钮，当用户单击该按钮时，它将在页面上创建一个隐藏的文本框，并将要复制的文本放入该文本框中。然后，它选中该文本框中的内容并使用 document.execCommand(‘copy’) 命令将其复制到剪贴板中。最后，它从页面中删除了该文本框。在复制完成后，代码还将显示一个提示框来告知用户复制操作已完成。

请注意，由于浏览器的安全限制，上述代码在某些浏览器中可能无法正常工作。因此，最好使用库，如 clipboard.js 或者 zclip 来实现更可靠的复制操作。